Sidebar Nav

Composable building blocks for sidebar navigation: NavItem for individual links, NavGroup for labelled sections, and SidebarNav as the root container.

import { SidebarNav } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add nav

Import

import.tsx

import { SidebarNav, NavGroup, NavItem } from "@aetherstack/patterns"

Usage

sidebar-nav.tsx

import { SidebarNav, NavGroup, NavItem } from "@aetherstack/patterns"
import { LayoutDashboard, Users, Settings } from "lucide-react"

<SidebarNav>
  <NavGroup label="Main">
    <NavItem
      href="/dashboard"
      label="Dashboard"
      icon={<LayoutDashboard className="h-4 w-4" />}
      active={pathname === "/dashboard"}
    />
    <NavItem
      href="/team"
      label="Team"
      icon={<Users className="h-4 w-4" />}
      badge={3}
    />
  </NavGroup>

  <NavGroup label="Settings" collapsible>
    <NavItem
      href="/settings"
      label="General"
      icon={<Settings className="h-4 w-4" />}
    />
  </NavGroup>
</SidebarNav>

Props

Prop	Type	Default	Description
NavItem.href*	string	—	Link destination.
NavItem.label*	string	—	Link text.
NavItem.icon	ReactNode	—	Icon to the left of the label. Recommended: Lucide icon, h-4 w-4.
NavItem.badge	string \| number	—	Count badge shown on the right.
NavItem.active	boolean	—	Highlights the item as the current page.
NavItem.disabled	boolean	—	Makes the item non-interactive.
NavGroup.label	string	—	Section heading above the group.
NavGroup.collapsible	boolean	false	Makes the group toggleable.
NavGroup.defaultCollapsed	boolean	false	Whether the group starts collapsed.

* Required

Accessibility

→SidebarNav renders as <nav aria-label="Sidebar navigation"> — a landmark region.
→Active NavItem gets aria-current="page" automatically.
→Disabled NavItem gets aria-disabled="true" and tabIndex={-1}.
→Collapsible NavGroup toggles aria-expanded on the heading button.