Nav Item

Sidebar item with icon, active state, right-edge indicator dot. Mono label by default; sans available.

Add to your project

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/andromeda-nav-item

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 accent text and the indicator dot.
mono	`boolean`	true	Renders the label in uppercase mono type; set false for sans.
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.