Sidebar

Installation

npx shadcn@latest add @blank/sidebar

Usage

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

<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Application</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive>Home</SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <main>
    <SidebarTrigger />
  </main>
</SidebarProvider>

The examples use collapsible="none" to fit in the page. In an app, leave the default offcanvas (or set icon), and SidebarProvider handles the ⌘B shortcut, the cookie that remembers the state and the sheet on mobile.

Examples

Collapsible sub menu

A Collapsible around the menu item opens SidebarMenuSub; SidebarMenuBadge adds a count that hides when the sidebar collapses to icons.

Search and actions

SidebarGroupAction sits beside a group label; SidebarMenuAction with showOnHover appears on the row being pointed at and stays visible while its menu is open.

API Reference

SidebarProvider

Every div prop, plus:

Sidebar

Every div prop, plus:

SidebarMenuButton

Every button prop, plus:

SidebarMenuAction

SidebarMenuSubButton

useSidebar

Returns { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }.