GitHub Stars

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 Home from "@lucide/astro/icons/house"

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="/">
                <Home />
                <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

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

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

---
import Home from "@lucide/astro/icons/house"
import LayoutDashboard from "@lucide/astro/icons/layout-dashboard"
import Settings from "@lucide/astro/icons/settings"

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>
                <Home />
                <span>Home</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton href="/dashboard">
                <LayoutDashboard />
                <span>Dashboard</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton href="/settings">
                <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 Ellipsis from "@lucide/astro/icons/ellipsis"
import Folder from "@lucide/astro/icons/folder"
import FolderGit2 from "@lucide/astro/icons/folder-git-2"
import Plus from "@lucide/astro/icons/plus"

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">
    <Plus />
  </SidebarGroupAction>
  <SidebarGroupContent>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton href="/projects/web" isActive>
          <Folder />
          <span>Web App</span>
        </SidebarMenuButton>
        <SidebarMenuAction showOnHover aria-label="More actions">
          <Ellipsis />
        </SidebarMenuAction>
        <SidebarMenuBadge>12</SidebarMenuBadge>
      </SidebarMenuItem>
      <SidebarMenuItem>
        <SidebarMenuButton>
          <FolderGit2 />
          <span>Internal Tools</span>
        </SidebarMenuButton>
        <SidebarMenuSub>
          <SidebarMenuSubItem>
            <SidebarMenuSubButton href="/projects/internal/design">
              Design System
            </SidebarMenuSubButton>
          </SidebarMenuSubItem>
          <SidebarMenuSubItem>
            <SidebarMenuSubButton href="/projects/internal/docs">
              Docs
            </SidebarMenuSubButton>
          </SidebarMenuSubItem>
        </SidebarMenuSub>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroupContent>
</SidebarGroup>

Floating Variant

---
import Activity from "@lucide/astro/icons/activity"
import Sparkles from "@lucide/astro/icons/sparkles"

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="/">
                <Sparkles />
                <span>Overview</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton href="/activity">
                <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.