# Sidebar

> A full application sidebar system: provider, collapsible rail, groups, and menus.

_Updated: 2026-06-04_

A full application sidebar system: provider, collapsible rail, groups, and menus.

## Installation

```bash
railbase ui add sidebar
```

Peer dependencies:

```bash
npm install class-variance-authority
```

> [!NOTE]
> `railbase ui add` also copies the `button`, `input`, `separator`, `sheet`, `skeleton`, `tooltip` components and shared primitives — they ship alongside this component automatically.

## Usage

```tsx
import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarInset, SidebarTrigger } from "@/lib/ui/sidebar";

<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarMenu>
          <SidebarMenuItem><SidebarMenuButton>Home</SidebarMenuButton></SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {/* page content */}
  </SidebarInset>
</SidebarProvider>
```

## Anatomy

Exported parts: `useSidebar` · `SidebarProvider` · `Sidebar` · `SidebarTrigger` · `SidebarRail` · `SidebarInset` · `SidebarInput` · `SidebarHeader` · `SidebarFooter` · `SidebarSeparator` · `SidebarContent` · `SidebarGroup` · `SidebarGroupLabel` · `SidebarGroupContent` · `SidebarMenu` · `SidebarMenuItem` · `SidebarMenuAction` · `SidebarMenuButton` · `SidebarMenuSub` · `SidebarMenuSubItem` · `SidebarMenuSubButton` · `SidebarMenuSkeleton`