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
4 examplesStates
5 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 20px 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. |
| collapsed | boolean | false | Icon-rail form: centers the icon, drops the label to screen readers only, and drops the active edge square — the brand glyph is the active signal on a rail. 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>. |
| className | string | - | Extra classes merged onto the root element. |
| style | React.CSSProperties | - | Inline styles merged onto the root element. |
AI Canvas