Sidebar

The app's main navigation. Collapses to icons on desktop and turns into a sheet on mobile.

Preview frame

In the preview, the sidebar sits in a box with transform-gpu so its fixed container stays inside it. In an app, SidebarProvider wraps the whole layout and the sidebar fills the window height. Toggle it with the button or Ctrl + B.

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@zynactra/ui/sidebar"

app/layout.tsx

<SidebarProvider>
  <Sidebar collapsible="icon">
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Projects</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive tooltip="Home">
                <HomeIcon />
                <span>Home</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {children}
  </SidebarInset>
</SidebarProvider>

collapsible is offcanvas (slides away), icon (shrinks to icons) or none. variant is sidebar, floating or inset. The open state is saved in the sidebar_state cookie; read it on the server and pass defaultOpen to avoid a flash.

Examples

Active item

The active item comes from the current path. Home matches exactly; every other item also matches its sub-pages, so /services/billing-api keeps Services active.

Collapsed to icons

collapsible="icon" with defaultOpen={false}. Each button's tooltip shows its name while collapsed.

Nested items

Sub-pages under a collapsible item, with Collapsible rendering the SidebarMenuItem. A group starts open when it holds the current page.

Guidelines

isActive on the current page's button. That's the "active place" in the brand budget.
Give every button a tooltip so the icon-only state still has names.
Top level: five to seven items. Group the rest under labels, and keep settings and the account in the footer.
Pair it with Breadcrumb in the inset header for deeper pages.