For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
43
Sponsor

Sidebar

PreviousNext

A composable, themeable and customizable sidebar component.

Application
Platform
Toggle the sidebar
"use client";

import {
  CalendarIcon,
  HomeIcon,
  InboxIcon,

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/sidebar.json

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar/sidebar";
<SidebarProvider>
  <Sidebar>
    <SidebarHeader />
    <SidebarContent>
      <SidebarGroup />
    </SidebarContent>
  </Sidebar>
  <main>
    <SidebarTrigger />
  </main>
</SidebarProvider>

Composition

Use the following composition to build a Sidebar:

SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   ├── SidebarContent
│   │   └── SidebarGroup
│   │       ├── SidebarGroupLabel
│   │       └── SidebarGroupContent
│   │           └── SidebarMenu
│   │               └── SidebarMenuItem
│   │                   └── SidebarMenuButton
│   └── SidebarFooter
└── SidebarInset
    └── SidebarTrigger

RTL

To enable right-to-left support, see the RTL guide.

التطبيق
المنصة
بدّل الشريط الجانبي
"use client";

import {
  CalendarIcon,
  HomeIcon,
  InboxIcon,