Components

Sidebar Nav

A vertical navigation sidebar with collapsible groups, search, and active state indication. Perfect for dashboards and admin panels.

Basic usage

Compose with SidebarNavSearch, SidebarNavContent, SidebarNavGroup, and SidebarNavItem.

Collapsible groups

Groups are collapsible by default. Click the header to toggle. Use collapsible={false} to disable.

With badges

Add notification counts or status indicators with the badge prop.

SidebarNav Props

PropTypeDefaultDescription
activePathstring—Currently active route path.
onNavigate(path: string) => void—Callback when a nav item is clicked.

SidebarNavGroup Props

PropTypeDefaultDescription
labelrequiredstring—Section heading text.
collapsiblebooleantrueWhether the group can be collapsed.
defaultOpenbooleantrueInitial expanded state.

SidebarNavItem Props

PropTypeDefaultDescription
hrefrequiredstring—Route path for this item.
iconReact.ReactNode—Icon rendered to the left.
badgeReact.ReactNode—Badge or count rendered to the right.

Accessibility

  • Uses semantic <nav> with aria-label.
  • Collapsible groups use aria-expanded.
  • Active item has aria-current="page".
  • Search input has accessible label.