Sidebar

A composable, themeable and accessible sidebar component.

Examples

Default

Sidebar

Footer

Main Content

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <h2 class="px-4 text-lg font-semibold tracking-tight">
        Sidebar
      </h2>
    </SidebarHeader>
    <SidebarContent>
      <SidebarMenu>
        <SidebarMenuItem>
           <SidebarMenuButton>Home</SidebarMenuButton>
        </SidebarMenuItem>
        <SidebarMenuItem>
           <SidebarMenuButton>Settings</SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarContent>
    <SidebarFooter>
      <p class="px-4 text-xs text-muted-foreground">
         Footer
      </p>
    </SidebarFooter>
  </Sidebar>
  <main class="w-full">
    <div class="p-4">
      <SidebarTrigger />
      <div class="mt-4">
        Main Content
      </div>
    </div>
  </main>
</SidebarProvider>

Props

SidebarProvider

Prop	Type	Default	Description
default-open	boolean	true	The default open state of the sidebar
open	boolean	true	The controlled open state of the sidebar
variant	'sidebar' | 'floating' | 'inset'	'sidebar'	The variant of the sidebar
collapsible	'offcanvas' | 'icon' | 'none'	'offcanvas'	The collapsible state of the sidebar

Sidebar

Prop	Type	Default	Description
side	'left' | 'right'	'left'	The side of the screen the sidebar should appear on
variant	'sidebar' | 'floating' | 'inset'	'sidebar'	The variant of the sidebar
collapsible	'offcanvas' | 'icon' | 'none'	'offcanvas'	The collapsible state of the sidebar

Slots

SidebarProvider

Slot	Description
default	The content of the sidebar provider

Sidebar

Slot	Description
default	The content of the sidebar
header	The header content
content	The main content
footer	The footer content
rail	The rail content

SidebarHeader

Slot	Description
default	The header content

SidebarContent

Slot	Description
default	The content

SidebarFooter

Slot	Description
default	The footer content

SidebarMenu

Slot	Description
default	The menu items

SidebarMenuItem

Slot	Description
default	The menu item content

SidebarMenuButton

Slot	Description
default	The menu button content

SidebarTrigger

Slot	Description
default	The trigger content