> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sidebar

> Vertical navigation sidebar for app layouts.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/sidebar-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=fff09d195659b2d8ff99a1ecfb41dece" alt="Sidebar component preview (light)" height="210" data-path="images/ui/sidebar-light.png" />
</Frame>

* **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

```tsx sabo/src/components/ui/sidebar.tsx theme={null}
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

<ParamField path="SidebarProvider.defaultOpen" type="boolean" default="true">
  Initial expanded state on desktop.
</ParamField>

<ParamField path="Sidebar.side" type="string" default="left">
  <code>left</code> | <code>right</code>
</ParamField>

<ParamField path="Sidebar.variant" type="string" default="sidebar">
  <code>sidebar</code> | <code>floating</code> | <code>inset</code>
</ParamField>

<ParamField path="Sidebar.collapsible" type="string" default="offcanvas">
  <code>offcanvas</code> | <code>icon</code> | <code>none</code>
</ParamField>

## Styling tip

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

## Accessibility

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