Sidebar

Installation

pnpm dlx shadcn@latest add @spaceui/primitives-sidebar

Usage

import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
} from '@/components/ui/sidebar'

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <h2>Workspace</h2>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Menu</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton asChild>
                <a href="/home">Home</a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <p>User account</p>
    </SidebarFooter>
  </Sidebar>
  <SidebarInset>
    <header className="flex h-12 items-center px-4 border-b">
      <SidebarTrigger />
    </header>
    <main className="p-4">
      <h1>Content</h1>
    </main>
  </SidebarInset>
</SidebarProvider>

Anatomy

<SidebarProvider>
  <Sidebar>
    <SidebarHeader />
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel />
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton />
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter />
  </Sidebar>
</SidebarProvider>

Structure & Architecture

The Sidebar component is built using a composable slot-based architecture:

• SidebarProvider: Manages responsive open/close state, mobile drawer transition, and cookie persistence.
• Sidebar: The main sidebar container supporting collapsible states (offcanvas, icon, none).
• SidebarTrigger: Toggle button to collapse or expand the sidebar (with keyboard shortcut Cmd+B / Ctrl+B).
• SidebarHeader / SidebarFooter: Pinned top and bottom areas.
• SidebarContent: Scrollable body area for navigation items and groups.
• SidebarGroup: Groups related links together with optional SidebarGroupLabel and SidebarGroupAction.
• SidebarMenu: Unordered list container for SidebarMenuItem and SidebarMenuButton.
• SidebarMenuAction / SidebarMenuBadge: Secondary quick action buttons and badge counters within menu items.
• SidebarMenuSub / SidebarMenuSubItem / SidebarMenuSubButton: Nested sub-level navigation items within menus.
• SidebarMenuSkeleton: Skeleton loader state for dynamic menu items.
• SidebarInput / SidebarSeparator: Input search fields and separators styled specifically for the sidebar.
• SidebarRail: Interactive resize/rail edge to toggle collapse on hover/click.
• SidebarInset: Main content container that adjusts margins alongside the sidebar.

API Reference

SidebarProvider

Sidebar

SidebarMenuButton

Interactive button within a sidebar menu item.

SidebarMenuAction

Secondary action button placed inside a sidebar menu item.

SidebarMenuSkeleton

Loading placeholder for sidebar menu items.

SidebarMenuSubButton

Nested sub-level navigation link button within a sidebar submenu.