Atoms

Sidebar

A collapsible sidebar with mobile support.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/sidebar

Install the following dependencies:

npm install class-variance-authority lucide-react radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarSectionLabel,
} from '@/components/ui/sidebar';
<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarSectionLabel>Organization</SidebarSectionLabel>
      <SidebarGroup>
        <SidebarGroupLabel>Ledger</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton>
                <HomeIcon />
                <span>Dashboard</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
</SidebarProvider>

Label hierarchy#

The nav reads top-down in three type recipes, so a scan goes area → group → destination without the three levels competing:

  1. SidebarSectionLabel — a product area (an organization, a stack) that spans several groups. A gold Eyebrow in mono, text-sm. It is a direct child of SidebarContent, not of a group, and hides on the icon rail.
  2. SidebarGroupLabel — a group of items inside a section. Mono uppercase, text-xs, muted. Collapses its own height on the icon rail.
  3. SidebarMenuButton — the destination itself. Sans, text-sm, with an icon and a tooltip for the collapsed rail.

Use a section label only when there is more than one section, and a group label only when the section has more than one group — a single unlabelled group under a section label is the flattest form that still reads.

Examples#

Sections and groups#

Sections only#

Groups only#

Nested items#

Badges and actions#

Loading#

Drill-in pane#

Icon rail#

Compound Components

Compose the pieces you need:

<SidebarSectionLabel />Gold eyebrow naming a product area that spans several groups. Sits directly in SidebarContent and hides when the sidebar collapses to icons.
<SidebarGroupLabel />Mono uppercase label for a group of items inside a section. Collapses its own height on the icon rail.
<SidebarMenuButton />Nav item in sans with an icon, isActive state, and a tooltip used once the rail is collapsed.