GitHub 560+

Sidebar

A composable, themeable, and customizable Astro sidebar component.

Installation

npx shadcn@latest add @fulldev/sidebar

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar"
---
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:

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:

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

Props

NameTypeDescription
defaultOpenbooleanSets the initial desktop state. Defaults to true.
openbooleanSets the initial desktop state explicitly.

Props

NameTypeDescription
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

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

---
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 for more information on props.