Sidebar

A collapsible application sidebar with structured header, content, labels, and items.

Installation

bunx @swift-rust/ui add sidebar

Usage

tsx

1import { Sidebar, SidebarContent, SidebarGroupLabel, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
2 
3<SidebarProvider>
4  <Sidebar>
5    <SidebarHeader>Workspace</SidebarHeader>
6    <SidebarContent>
7      <SidebarGroupLabel>Menu</SidebarGroupLabel>
8      <SidebarItem active>Overview</SidebarItem>
9    </SidebarContent>
10  </Sidebar>
11  <SidebarTrigger />
12</SidebarProvider>

Composition

Sidebar is composed of these parts:

SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   └── SidebarContent
│       ├── SidebarGroupLabel
│       └── SidebarItem
└── SidebarTrigger

← Sheet Skeleton →