Sidebar

A composable sidebar built from several small components. Supports collapsible groups, a mobile sheet, keyboard shortcuts, and an inset content area via SidebarProvider.

Sidebar Examples

Installation

# The component is already installed at:
# src/components/ui/shadcn/sidebar.tsx

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from '@/components/ui/shadcn/sidebar'

export function SidebarDemo() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton asChild>
                <a href="#">Home</a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <SidebarTrigger />
        <p>Main content</p>
      </SidebarInset>
    </SidebarProvider>
  )
}

Components