║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Sidebar description: A composable, themeable and customizable sidebar component. Created by Shadcn and animated by Animate UI. author: name: imskyleen url: https://github.com/imskyleen

<ComponentPreview name="demo-components-radix-sidebar" iframe bigScreen />

Installation

<ComponentInstallation name="components-radix-sidebar" />

Usage

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>Item 1</SidebarMenuItem>
        <SidebarMenuItem>Item 2</SidebarMenuItem>
        <SidebarMenuItem>Item 3</SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Label 1</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>Item 1</SidebarMenuItem>
          <SidebarMenuItem>Item 2</SidebarMenuItem>
          <SidebarMenuItem>Item 3</SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
      <SidebarGroup>
        <SidebarGroupLabel>Label 2</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>Item 1</SidebarMenuItem>
          <SidebarMenuItem>Item 2</SidebarMenuItem>
          <SidebarMenuItem>Item 3</SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <SidebarMenu>
        <SidebarMenuItem>Item 1</SidebarMenuItem>
        <SidebarMenuItem>Item 2</SidebarMenuItem>
        <SidebarMenuItem>Item 3</SidebarMenuItem>
      </SidebarMenu>
    </SidebarFooter>
    <SidebarRail />
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {...}
  </SidebarInset>
</SidebarProvider>

API Reference

SidebarProvider

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidebarprovider" text="Shadcn UI API Reference - SidebarProvider" /> </div>

Sidebar

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidebar" text="Shadcn UI API Reference - Sidebar" /> </div>

useSidebar

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#usesidebar" text="Shadcn UI API Reference - useSidebar" /> </div>

SidebarHeader

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidebarheader" text="Shadcn UI API Reference - SidebarHeader" /> </div>

SidebarFooter

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidebarfooter" text="Shadcn UI API Reference - SidebarFooter" /> </div>

SidebarContent

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidebarcontent" text="Shadcn UI API Reference - SidebarContent" /> </div>

SidebarGroup

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidebargroup" text="Shadcn UI API Reference - SidebarGroup" /> </div>

Collapsible SidebarGroup

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#collapsible-sidebargroup" text="Shadcn UI API Reference - Collapsible SidebarGroup" /> </div>

SidebarGroupAction

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidebargroupaction" text="Shadcn UI API Reference - SidebarGroupAction" /> </div>

SidebarMenu

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidebarmenu" text="Shadcn UI API Reference - SidebarMenu" /> </div>

SidebarMenuButton

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidemenubutton" text="Shadcn UI API Reference - SidebarMenuButton" /> </div>

SidebarMenuAction

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidemenuaction" text="Shadcn UI API Reference - SidebarMenuAction" /> </div>

SidebarMenuSub

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidemenusub" text="Shadcn UI API Reference - SidebarMenuSub" /> </div>

Collapsible SidebarMenu

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#collapsible-sidemenusub" text="Shadcn UI API Reference - Collapsible SidebarMenuSub" /> </div>

SidebarMenuBadge

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidemenubadge" text="Shadcn UI API Reference - SidebarMenuBadge" /> </div>

SidebarMenuSkeleton

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidemenuskeleton" text="Shadcn UI API Reference - SidebarMenuSkeleton" /> </div>

SidebarSeparator

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidemenu" text="Shadcn UI API Reference - SidebarMenu" /> </div>

SidebarTrigger

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidetrigger" text="Shadcn UI API Reference - SidebarTrigger" /> </div>

SidebarRail

<div className="flex flex-col gap-2"> <ExternalLink href="https://ui.shadcn.com/docs/components/sidebar#sidebarrail" text="Shadcn UI API Reference - SidebarRail" /> </div>

Credits

• Credit to shadcn/ui for the sidebar component.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║