Sidebar

Vertical navigation sidebar for app layouts.

• Location: sabo/src/components/ui/sidebar.tsx

When to use

• Persistent app navigation with groups, nested items, and badges.
• Collapsible behaviors for desktop (offcanvas or icon) and mobile sheet.

Usage

sabo/src/components/ui/sidebar.tsx

import {
  SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter,
  SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton,
  SidebarInset, SidebarTrigger
} from "@/components/ui/sidebar";
import { LayoutDashboardIcon } from "lucide-react";

export function Example() {
  return (
    <SidebarProvider defaultOpen>
      <Sidebar collapsible="icon">
        <SidebarHeader />
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>General</SidebarGroupLabel>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton isActive>
                  <LayoutDashboardIcon />
                  <span>Dashboard</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroup>
        </SidebarContent>
        <SidebarFooter />
      </Sidebar>
      <SidebarInset>
        <div className="p-3">
          <SidebarTrigger />
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}

Key props

SidebarProvider.defaultOpen · boolean · default: "true"

Initial expanded state on desktop.

Sidebar.side · string · default: "left"

left | right

Sidebar.variant · string · default: "sidebar"

sidebar | floating | inset

Sidebar.collapsible · string · default: "offcanvas"

offcanvas | icon | none

Styling tip

• Use SidebarMenuButton variants and sizes for density control; badges/actions are optional.
• Place page content inside SidebarInset to respect inset/floating variants.

Accessibility

• Mobile uses a Sheet with focus trap; desktop supports keyboard toggle via Cmd/Ctrl+B.