View fulldotdev/ui on GitHub

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, plus mobileTitle and mobileDescription for the mobile drawer’s screen reader heading.
  • 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. It renders the page’s <main>, so do not nest LayoutMain inside it.
  • 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 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.