Sidebar

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/sidebar.json

Usage

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

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <SidebarTrigger />
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton asChild>
                <a href="/dashboard">Dashboard</a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter />
  </Sidebar>
</SidebarProvider>

API Reference

SidebarProvider

Context provider for sidebar state. Must wrap your layout.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Initial open state of the sidebar.
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.

The main sidebar container.

Prop	Type	Default	Description
`side`	`"left" \| "right"`	`"left"`	Which side the sidebar appears on.
`variant`	`"sidebar" \| "floating" \| "inset"`	`"sidebar"`	Visual style variant.
`collapsible`	`"offcanvas" \| "icon" \| "none"`	`"offcanvas"`	How the sidebar collapses.

SidebarTrigger

Button that toggles the sidebar open/closed.

SidebarHeader, SidebarContent, SidebarFooter

Layout sections of the sidebar.

SidebarGroup, SidebarGroupLabel, SidebarGroupContent

Group a set of menu items with an optional label.

SidebarMenu, SidebarMenuItem, SidebarMenuButton

Build the navigation menu items.

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Whether the menu button is in an active state.
`asChild`	`boolean`	`false`	Render as a child element (e.g., Link).
`tooltip`	`string \| TooltipContentProps`	—	Tooltip shown when sidebar is collapsed to icon mode.