Nav Item
Sourcecomponents/NavItem.astro
On dark
The plain navigation link — no underline, hover fades in. This is the default: white text for the header menu and the footer.
Header menu — row
Footer column — stacked
On light
The same link on a light surface — ink text, hover shifts to violet.
surface="light"
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
href | string | — | Destination. Required. |
surface | 'dark' | 'light' | 'dark' | White text for the nav & footer, ink text on a light surface. |
external | boolean | false | Opens in a new tab and adds an up-right arrow. |
Usage
Used in the header menu and the footer columns. Defaults to the dark surface both of those sit on.
<!-- Header menu / footer (dark surface) -->
<NavItem href="/work">Work</NavItem>
<NavItem href="/services">Services</NavItem>
<NavItem href="https://…" external>Instagram</NavItem>
<!-- On a light surface -->
<NavItem href="/about" surface="light">About</NavItem>Rules
Do
Use it for menu and footer navigation — top-level destinations.
Add external for off-site links so they get the arrow and open in a new tab.
Don't
Underline it — the fade-on-hover is the whole affordance.
Use it inline in body copy — that's Link.