Components

Sidebar

A persistent navigation rail with groups, active states, and a collapsible mobile mode.

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>buena notes</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Notes</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive>All notes</SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton>Drafts</SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <SidebarTrigger />
    </SidebarFooter>
  </Sidebar>
  <SidebarInset>{/* page content */}</SidebarInset>
</SidebarProvider>

This frame is a static sketch of the pattern. The real primitive is src/components/ui/sidebar.tsx — SidebarProvider plus the Sidebar parts, with collapse state and a mobile sheet built in. The docs sidebar on this site is the live pattern. Sketched above: SidebarMenuAction (the trailing + on “All notes”), SidebarMenuBadge (the count on “Drafts”), SidebarMenuSub (the nested year list), SidebarMenuSkeleton (the loading row) and SidebarRail (the drag strip on the right edge). For a Controlled Sidebar, drive SidebarProvider with open / onOpenChange instead of the built-in defaultOpen state.

Keyboard Shortcut — SidebarProvider registers a global ⌘ / Ctrl + B handler that toggles the sidebar open/closed (SIDEBAR_KEYBOARD_SHORTCUT in sidebar.tsx).

Width — the rail sizes from the --sidebar-width / --sidebar-width-icon CSS variables; override them via style on SidebarProvider (e.g. { "--sidebar-width": "20rem" }) rather than a width class.

Markdown for agents: /design/sidebar.md · spec: /design.md