Sidebar

A composable, themeable, customizable sidebar with mobile support, multiple variants, and keyboard shortcuts.

Install

npx shadcn@latest add https://atomx.acau.net/r/sidebar.json

Usage

Wrap your layout in SidebarProvider. Place the Sidebar and your main content (typically inside a SidebarInset or <main>) as siblings. Use SidebarTrigger anywhere to toggle the open state. Ctrl/Cmd + B is wired in by default.

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>{/* brand */}</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Workspace</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton>
                <Inbox />
                <span>Inbox</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <main>
    <SidebarTrigger />
    {/* page content */}
  </main>
</SidebarProvider>

The Sidebar itself accepts side, variant, and collapsible props to control layout and collapse behavior.

Preview

Each preview below is rendered inside an isolated bounded container so the sidebar's position: fixed is scoped to that frame rather than the viewport. In a real app the sidebar spans the full viewport and the collapse animations cover the layout edge-to-edge.

Static — collapsible="none"

A non-collapsible sidebar that's always visible. Useful when the host layout never needs to free up horizontal space.

Offcanvas — hide on trigger (default)

Clicking the trigger slides the sidebar fully off the canvas. This is the default collapsible mode. Cmd/Ctrl + B also toggles it.

Icon — collapse to icons on trigger

The sidebar shrinks to an icon-only strip; the labels collapse. Set the tooltip prop on each SidebarMenuButton so the label appears on hover when collapsed.

Floating variant

The floating variant lifts the sidebar off the edge with a border, rounded corners, and a shadow. It composes with any collapsible mode.

Props

SidebarProvider extends React.ComponentProps<"div"> plus:

Sidebar extends React.ComponentProps<"div"> plus:

SidebarMenuButton extends React.ComponentProps<"button"> plus:

The useSidebar() hook exposes the context (state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar) for custom controls.