Sidebar Nav

Navigation primitives for chrome glass sidebars: grouped capsule items, submenus, and a pinned footer for icon links. Use inside AppShell's sidebar slot.

Anatomy

<SidebarNav>
  <SidebarNavGroup>
    <SidebarNavItem href="/" active icon={<HomeIcon />}>Home</SidebarNavItem>
  </SidebarNavGroup>
  <SidebarNavGroup label="Workspace">
    <SidebarNavItem href="/projects" icon={<BoxIcon />}>Projects</SidebarNavItem>
    <SidebarNavSub>
      <SidebarNavItem href="/projects/cx">TRA CX</SidebarNavItem>
    </SidebarNavSub>
  </SidebarNavGroup>
</SidebarNav>
<SidebarNavFooter>
  <IconButton /> <IconButton />
</SidebarNavFooter>

Framework links (asChild)

With asChild, render your own link (e.g. next/link) inside the capsule — put the icon and label inside the link so the whole capsule stays clickable.

<SidebarNavItem asChild active={pathname === '/tasks'}>
  <Link href="/tasks"><ListIcon className="h-4 w-4" />Tasks</Link>
</SidebarNavItem>

Rules

Items are capsules: 36px tall, full-radius, quiet ink; the active item gets a raised light fill and primary ink — never a frosted fill (no glass on glass).
Group labels are uppercase micro-labels; keep groups to a handful of items.
Submenus indent behind a hairline rail and drop to 32px rows.
The footer row (SidebarNavFooter) pins to the bottom for icon links — log out, appearance, help. Use Dropdown for menus that open from it.
One sidebar per app, in AppShell's sidebar slot; don't nest sidebars.