Navigation
NavItem
A row in a sidebar.
Examples
default
Notes
A row in a sidebar.
aria-current="page" and not only a colour: the active row has to be identifiable to a reader who cannot see that it is darker. In this system it is also carried by weight and by a filled ground, so it survives monochrome printing and low contrast.
Framework-agnostic. asChild is how a Next or React Router app gets client-side navigation without this package importing either.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| hrefrequired | string | — | |
| active | boolean | false | Marks the current route. Also sets `aria-current="page"`. |
| asChild | boolean | false | Hand the styling to a router's own `Link` instead of a native `<a>`. The slotted child receives the classes and `aria-current`, and becomes the row — so `icon` is not rendered in this mode; put it inside the child. |
| className | string | — | |
| icon | LucideIcon | Optional leading icon (a lucide-react component, rendered at 18px). |
Also accepts everything in Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'>. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- aria-current="page" and not only a colour: the active row is also carried by weight and a filled ground.