Nav

Vertical navigation menu for sidebars and dashboards. Supports sections, collapsible groups, icons, badges, active and disabled states, and router link integration via asChild.

Anatomy

<Nav>
  <NavSection title="Main">
    <NavItem href="…" active icon={…} badge="4">Label</NavItem>
    <NavItem href="…" disabled>Label</NavItem>
  </NavSection>
  <NavGroup title="Projects" icon={…} defaultOpen>
    <NavItem href="…">Sub-item</NavItem>
  </NavGroup>
  <NavSeparator />
  <NavItem href="…">Settings</NavItem>
</Nav>

Examples

With sections

Collapsible groups

Badges

Disabled

Sizes

Icon only

Icon only with tooltips

Collapsible sidebar

Props

Nav

size= 'md'

'sm' | 'md' | 'lg'

Sets text size and item padding across all children.

collapsed= false

boolean

Collapses all items to icon-only mode. NavGroups are hidden. Pair NavItem tooltip for accessibility.

children*

ReactNode

NavSection, NavGroup, NavItem, NavSeparator.

className

string

Additional classes on the nav element.

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Sets text size and item padding across all children.
collapsed	boolean	false	Collapses all items to icon-only mode. NavGroups are hidden. Pair NavItem tooltip for accessibility.
children*	ReactNode	—	NavSection, NavGroup, NavItem, NavSeparator.
className	string	—	Additional classes on the nav element.

NavSection

title

string

Uppercase section label rendered above the items.

children*

ReactNode

NavItem elements.

className

string

Additional classes.

Prop	Type	Default	Description
title	string	—	Uppercase section label rendered above the items.
children*	ReactNode	—	NavItem elements.
className	string	—	Additional classes.

NavItem

active= false

boolean

Highlights the item as the current page (aria-current="page").

disabled= false

boolean

Dims and blocks interaction.

icon

ReactNode

Icon rendered before the label.

badge

ReactNode

Badge rendered after the label — hidden in icon-only mode.

iconOnly= false

boolean

Hides label and badge, renders a square centred icon button. Automatically set when Nav is collapsed.

tooltip

string

Label shown in a Tooltip (side="right") when icon-only. Also sets aria-label.

as= 'a'

React.ElementType

Swap the rendered element — pass a router Link component for client-side navigation.

href

string

Link destination.

children*

ReactNode

Item label (hidden in icon-only mode but read by screen readers via aria-label).

Prop	Type	Default	Description
active	boolean	false	Highlights the item as the current page (aria-current="page").
disabled	boolean	false	Dims and blocks interaction.
icon	ReactNode	—	Icon rendered before the label.
badge	ReactNode	—	Badge rendered after the label — hidden in icon-only mode.
iconOnly	boolean	false	Hides label and badge, renders a square centred icon button. Automatically set when Nav is collapsed.
tooltip	string	—	Label shown in a Tooltip (side="right") when icon-only. Also sets aria-label.
as	React.ElementType	'a'	Swap the rendered element — pass a router Link component for client-side navigation.
href	string	—	Link destination.
children*	ReactNode	—	Item label (hidden in icon-only mode but read by screen readers via aria-label).

NavGroup

title*

string

Group heading shown as the toggle button.

icon

ReactNode

Icon beside the group heading.

defaultOpen= false

boolean

Whether the group starts expanded.

children*

ReactNode

NavItem elements shown inside the group.

className

string

Additional classes.

Prop	Type	Default	Description
title*	string	—	Group heading shown as the toggle button.
icon	ReactNode	—	Icon beside the group heading.
defaultOpen	boolean	false	Whether the group starts expanded.
children*	ReactNode	—	NavItem elements shown inside the group.
className	string	—	Additional classes.

PreviousBreadcrumb NextNavbar