Nav Item
Links to one destination in a sidebar, in full or icon-only form.
Configurations
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Configurations
7 examplesStates
6 examplesAdd to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ComponentType<{ size?: number, weight?: string }> | - | Optional icon component rendered at 16px (iconSize.sm), 8px before the label. |
| labelreq | React.ReactNode | - | Visible content of the nav row. |
| active | boolean | false | Marks the row as the current selection, applying brand text and the indicator dot. |
| selected | boolean | false | The chosen item in a list (the open chat among chats), distinct from `active` (where you are in the app). Neutral: the pressed fill (surface.active) and text.primary, held on hover; no brand colour, no edge marker. Sets `aria-current="true"` unless the caller passes its own `aria-current`. `active` wins when both are set. |
| collapsed | boolean | false | Icon-rail form: centers the icon and drops the label to screen readers only. The active brand glyph and the trailing-edge marker both hold, so the selected row reads the same at either width. Requires `icon`; pair with a Tooltip so the label is still reachable by sight. |
| asChild | boolean | false | Renders via Radix Slot, merging props onto the child instead of a native button. |
| type | 'button'|'submit'|'reset' | 'button' | HTML button type; defaults to 'button' to avoid accidental form submits, and is omitted when asChild is set. |
| layoutGroupId | string | 'andromeda-navitem-indicator' | Override only when two distinct nav lists share a viewport and you don't want the active dot to animate between them. To get the slide between sibling NavItems, wrap the list in framer's <LayoutGroup>. |
| action | React.ReactNode | - | Trailing secondary control, typically a `PanelMenu size="sm"`. Rendered beside the row button (never inside it), on the row's right end; hidden at rest on pointer devices and shown on row hover, focus-within, on the `active` or `selected` row, and while its menu is open; always shown on touch. Not rendered when `collapsed`. |
| className | string | - | Extra classes merged onto the row element (the button, or the asChild element). |
| style | React.CSSProperties | - | Inline styles merged onto the row element (the button, or the asChild element). |
AI Canvas