Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Sidebar
description: A composable, themeable, and customizable Astro sidebar component.
---

import { Icon } from "@/components/ui/icon"

## Installation

```bash
npx shadcn@latest add @fulldev/sidebar
```

## Usage

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

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

<SidebarProvider>
  <Sidebar>
    <SidebarHeader />
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Application</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton href="/">
                <Icon name="house" />
                <span>Home</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarRail />
  </Sidebar>
  <SidebarInset>
    <header class="flex h-14 items-center border-b px-6">
      <SidebarTrigger />
    </header>
    <main class="flex-1 p-4">Your content</main>
  </SidebarInset>
</SidebarProvider>
```

## Composition

Use the following composition to build a sidebar layout:

```text
SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   ├── SidebarContent
│   │   ├── SidebarGroup
│   │   │   ├── SidebarGroupLabel
│   │   │   ├── SidebarGroupAction
│   │   │   ├── SidebarGroupContent
│   │   │   └── SidebarMenu
│   │   │       ├── SidebarMenuItem
│   │   │       │   ├── SidebarMenuButton
│   │   │       │   ├── SidebarMenuAction
│   │   │       │   └── SidebarMenuBadge
│   │   │       └── SidebarMenuItem
│   │   │           ├── SidebarMenuButton
│   │   │           └── SidebarMenuSub
│   │   │               ├── SidebarMenuSubItem
│   │   │               └── SidebarMenuSubItem
│   │   └── SidebarGroup
│   │       └── SidebarMenu
│   │           ├── SidebarMenuItem
│   │           └── SidebarMenuItem
│   ├── SidebarFooter
│   └── SidebarRail
└── SidebarInset
    └── SidebarTrigger
```

## Components

- `SidebarProvider` wraps the layout, owns the collapse state, and persists desktop state in the `sidebar_state` cookie.
- `Sidebar` renders the desktop shell and uses the shared `Sheet` primitive for the mobile drawer. It supports `side`, `variant`, `collapsible`, and `dir`.
- `SidebarTrigger` toggles the sidebar and supports the `cmd/ctrl+b` keyboard shortcut.
- `SidebarRail` renders the clickable rail used by shadcn’s desktop sidebar.
- `SidebarInset` wraps the main content when using the `inset` variant.
- `SidebarHeader`, `SidebarFooter`, and `SidebarContent` match the shadcn layout regions.
- `SidebarGroup`, `SidebarGroupLabel`, `SidebarGroupAction`, and `SidebarGroupContent` build sidebar sections.
- `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuSkeleton`, `SidebarMenuSub`, `SidebarMenuSubItem`, and `SidebarMenuSubButton` match the menu primitives from shadcn.
- `SidebarInput` and `SidebarSeparator` provide the shadcn sidebar input and separator styles.

## SidebarProvider

The Astro provider supports the same default width variables as shadcn:

```astro
<SidebarProvider style="--sidebar-width: 20rem; --sidebar-width-mobile: 20rem;">
  <Sidebar />
</SidebarProvider>
```

### Props

| Name          | Type      | Description                                         |
| ------------- | --------- | --------------------------------------------------- |
| `defaultOpen` | `boolean` | Sets the initial desktop state. Defaults to `true`. |
| `open`        | `boolean` | Sets the initial desktop state explicitly.          |

## Sidebar

### Props

| Name          | Type                                 | Description                              |
| ------------- | ------------------------------------ | ---------------------------------------- |
| `side`        | `"left" \| "right"`                  | Which side the sidebar should appear on. |
| `variant`     | `"sidebar" \| "floating" \| "inset"` | Visual variant for the desktop shell.    |
| `collapsible` | `"offcanvas" \| "icon" \| "none"`    | Collapse behavior.                       |

## Examples

### Basic Sidebar

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

<SidebarProvider>
  <Sidebar collapsible="icon">
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Platform</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton href="/" isActive>
                <Icon name="house" />
                <span>Home</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton href="#">
                <Icon name="layout-dashboard" />
                <span>Dashboard</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton href="#">
                <Icon name="settings" />
                <span>Settings</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <header class="flex h-14 items-center gap-2 border-b px-6">
      <SidebarTrigger />
      <span class="text-sm font-medium">Workspace</span>
    </header>
    <main class="flex-1 p-4">Main content</main>
  </SidebarInset>
</SidebarProvider>
```

### Menu Actions, Badges, and Submenus

```astro
---
import {
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from "@/components/ui/sidebar"
---

<SidebarGroup class="bg-sidebar w-72 rounded-lg border">
  <SidebarGroupLabel>Projects</SidebarGroupLabel>
  <SidebarGroupAction aria-label="Add project">
    <Icon name="plus" />
  </SidebarGroupAction>
  <SidebarGroupContent>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton href="#" isActive>
          <Icon name="folder" />
          <span>Web App</span>
        </SidebarMenuButton>
        <SidebarMenuAction showOnHover aria-label="More actions">
          <Icon name="ellipsis" />
        </SidebarMenuAction>
        <SidebarMenuBadge>12</SidebarMenuBadge>
      </SidebarMenuItem>
      <SidebarMenuItem>
        <SidebarMenuButton>
          <Icon name="folder-git-2" />
          <span>Internal Tools</span>
        </SidebarMenuButton>
        <SidebarMenuSub>
          <SidebarMenuSubItem>
            <SidebarMenuSubButton href="#">
              Design System
            </SidebarMenuSubButton>
          </SidebarMenuSubItem>
          <SidebarMenuSubItem>
            <SidebarMenuSubButton href="#"> Docs </SidebarMenuSubButton>
          </SidebarMenuSubItem>
        </SidebarMenuSub>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroupContent>
</SidebarGroup>
```

### Floating Variant

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

<SidebarProvider>
  <Sidebar variant="floating" collapsible="icon">
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton href="/">
                <Icon name="sparkles" />
                <span>Overview</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton href="#">
                <Icon name="activity" />
                <span>Activity</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarRail />
  </Sidebar>
  <SidebarInset>
    <header class="flex h-14 items-center gap-2 border-b px-6">
      <SidebarTrigger />
      <span class="text-sm font-medium">Floating Sidebar</span>
    </header>
    <main class="flex-1 p-4">Main content</main>
  </SidebarInset>
</SidebarProvider>
```

## Astro Notes

- The visual structure, classes, keyboard shortcut, cookie persistence, `icon` collapse mode, `offcanvas` mode, `floating` variant, `inset` layout, and tooltip behavior now track the shadcn reference closely in Astro.
- `SidebarMenuButton` accepts the same tooltip-style shorthand as the shadcn component, including a string or tooltip-content props object.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/sidebar) for more information on props.