Theme
Nav item
One link in the sidebar, with an icon, a label, a count or badge, and a current state. It holds no state, so a server layout can render it with its router's link.
Examples
Props
NavItem
One link in the app shell's sidebar: a real link, so it opens in a new tab and works before any script. Put it in the AppShell's nav or footer, or in a NavGroup; it renders a list item. It holds no state, so a server component can render it.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | |
label | string | — | |
icon? | IconName | — | Shown alone when the sidebar is a rail; without one, the rail shows the label's initial. |
current? | boolean | false | The page being viewed, or one of its sub-pages: marked aria-current="page". |
count? | number | — | How many things are behind the link, such as open concepts. |
badge? | ReactNode | — | A Badge or a StatusDot after the label, for something that is not a count. |
linkAs? | ElementType | "a" | The component that renders the link: a framework's client-side link, or a plain anchor. The system itself knows no router. |
Keyboard
| Key | Does |
|---|---|
| Enter | Follows the link |
Accessibility
- A real link in a list item: it opens in a new tab and works before any script.
- The current page is aria-current="page", and also drawn on layer3, not by colour alone.
- Without an icon, the rail shows the label's initial, hidden from screen readers, which read the label.