Sidebar

The sidebar is not a single panel. It is a small layout system for product shells: persistent navigation, inset content, compact icon mode, mobile sheet fallback, and a set of menu primitives that stay visually consistent under all of those states. In this repo it is tuned for product-facing surfaces rather than decorative marketing chrome.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<SidebarProvider defaultOpen>
  <Sidebar collapsible="icon">
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Sections</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive>
                <span>Overview</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
  </SidebarInset>
</SidebarProvider>

Why This Primitive Exists

Many product views need more than a drawer or a single nav list. The sidebar gives those interfaces a consistent shell for route structure, dense menus, badges, and collapsible behavior without rebuilding the frame on every page.

• Use it for dashboards, archives, operations views, and settings shells with persistent navigation.
• Prefer it when routes, counts, and section hierarchy should remain visible while the main content changes.
• Avoid it when the page only needs a temporary side panel. That is a better fit for Sheet.

Examples

Basic App Shell

The standard pattern pairs SidebarProvider with one Sidebar and one SidebarInset. This keeps the navigation and the content column coordinated across open, collapsed, and mobile states.

<SidebarProvider defaultOpen>
  <Sidebar collapsible="icon">{/* navigation */}</Sidebar>
  <SidebarInset>{/* main canvas */}</SidebarInset>
</SidebarProvider>

Collapsed Rail

Icon-collapse keeps the shell available without dedicating the full width to navigation. Tooltips and badges matter more in this mode because labels are hidden.

<Sidebar variant="floating" collapsible="icon">
  <SidebarMenuButton tooltip="Collections">
    <span>Collections</span>
  </SidebarMenuButton>
</Sidebar>

In Context

Inset mode is useful when the page content should preserve its own framed container while the sidebar remains persistent at the edge.

<Sidebar variant="inset" collapsible="offcanvas">
  <SidebarContent>{/* loading states, groups, routes */}</SidebarContent>
</Sidebar>

Guidance

Start With The Layout Contract

• Wrap the shell in SidebarProvider.
• Put persistent navigation inside Sidebar.
• Put the primary page content inside SidebarInset.

Choose The Right Collapse Mode

• Use collapsible="icon" when the nav should remain available in a narrow rail.
• Use collapsible="offcanvas" when the desktop sidebar should slide fully off screen.
• Use collapsible="none" when the width should remain fixed.

Keep Menu Structure Legible

• Use SidebarGroup, SidebarGroupLabel, and SidebarGroupContent to organize dense route lists.
• Use SidebarMenuBadge for short counts, not long labels.
• Reserve SidebarMenuAction for a small secondary control that should not compete with the main route target.

Know The Built-In Behavior

• The provider stores desktop open state in a cookie for seven days.
• SidebarTrigger and useSidebar().toggleSidebar() both respect mobile vs. desktop behavior.
• Cmd+B on macOS and Ctrl+B on Windows/Linux toggle the sidebar by default.

API Reference

Layout And State

Structural Exports

Key Props

Because the mobile implementation uses the shared Sheet primitive internally, the sidebar keeps a consistent overlay model when the shell collapses into a handheld layout.