Sidebar

<Sidebar.Provider defaultOpen>
  <Sidebar>
    <Sidebar.Content>
      <Sidebar.Group>
        <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
        <Sidebar.Menu>
          <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>
          <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>
        </Sidebar.Menu>
      </Sidebar.Group>
    </Sidebar.Content>
  </Sidebar>
</Sidebar.Provider>

Installation

Barrel

import { Sidebar } from "@cloudflare/kumo";

Granular

import { Sidebar } from "@cloudflare/kumo/components/sidebar";

At minimum you need Provider, Sidebar, Content (scrollable area), Menu, and MenuButton. Add Header / Footer to pin content above or below the scroll area. Use Group + GroupLabel to organize sections.

import { Sidebar } from "@cloudflare/kumo";
import { HouseIcon, CodeIcon, GearIcon } from "@phosphor-icons/react";

function AppLayout({ children }) {
  return (
    <Sidebar.Provider defaultOpen>
      <Sidebar>
        <Sidebar.Content>
          <Sidebar.Group>
            <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Menu>
              <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>
              {/* MenuItem only needed to wrap Collapsible or MenuAction */}
              <Sidebar.MenuItem>
                <Sidebar.Collapsible>
                  <Sidebar.CollapsibleTrigger
                    render={
                      <Sidebar.MenuButton icon={CodeIcon}>
                        Compute <Sidebar.MenuChevron />
                      </Sidebar.MenuButton>
                    }
                  />
                  <Sidebar.CollapsibleContent>
                    <Sidebar.MenuSub>
                      <Sidebar.MenuSubButton>Workers</Sidebar.MenuSubButton>
                    </Sidebar.MenuSub>
                  </Sidebar.CollapsibleContent>
                </Sidebar.Collapsible>
              </Sidebar.MenuItem>
            </Sidebar.Menu>
          </Sidebar.Group>
        </Sidebar.Content>
        <Sidebar.Footer>
          <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>
        </Sidebar.Footer>
      </Sidebar>
      <main className="flex-1">{children}</main>
    </Sidebar.Provider>
  );
}

Examples

Basic

The minimum viable sidebar: just groups, menu buttons, and collapsible sub-menus. No header or footer. MenuButton and MenuSubButton auto-wrap in <li> — no MenuItem / MenuSubItem needed.

<Sidebar.Provider defaultOpen>
  <Sidebar>
    <Sidebar.Content>
      <Sidebar.Group>
        <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
        <Sidebar.Menu>
          <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>
          <Sidebar.MenuButton icon={ChartBarIcon}>Analytics</Sidebar.MenuButton>
        </Sidebar.Menu>
      </Sidebar.Group>
    </Sidebar.Content>
  </Sidebar>
</Sidebar.Provider>

Collapsible Groups

Add collapsible to a Group and wrap the Menu in GroupContent to enable animated expand/collapse via the group label.

<Sidebar.Group collapsible defaultOpen>
  <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
  <Sidebar.GroupContent>
    <Sidebar.Menu>
      <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>
    </Sidebar.Menu>
  </Sidebar.GroupContent>
</Sidebar.Group>

Toggle & Collapsed State

Use Sidebar.Trigger in the footer or useSidebar().toggleSidebar programmatically. Pass tooltip to show labels on hover when collapsed.

<Sidebar.MenuButton icon={HouseIcon} tooltip="Home" active>
  Home
</Sidebar.MenuButton>

<Sidebar.Footer>
  <Sidebar.Trigger />
</Sidebar.Footer>

// Or programmatically:
const { toggleSidebar } = useSidebar();

Full Example

Kitchen sink: header with account switcher, search input, badges, collapsible sub-menus, and a footer action.

<Sidebar>
  <Sidebar.Header>
    <AccountSwitcher />
  </Sidebar.Header>
  <Sidebar.Content>
    <Sidebar.Input placeholder="Quick search..." shortcut="⌘K" />
    <Sidebar.Group>
      <Sidebar.Menu>
        <Sidebar.MenuButton icon={LockIcon}>
          Zero Trust
          <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>
        </Sidebar.MenuButton>
      </Sidebar.Menu>
    </Sidebar.Group>
  </Sidebar.Content>
  <Sidebar.Footer>
    <Sidebar.MenuButton icon={GearIcon}>Manage account</Sidebar.MenuButton>
  </Sidebar.Footer>
</Sidebar>

Resizable

Drag the edge to resize. Dragging below minWidth collapses; dragging outward from collapsed expands.

<Sidebar.Provider defaultOpen resizable defaultWidth={240} minWidth={180} maxWidth={400}>
  <Sidebar>
    <Sidebar.Content>...</Sidebar.Content>
    <Sidebar.ResizeHandle />
  </Sidebar>
</Sidebar.Provider>

Right Side

Use side="right" for a sidebar on the right edge. Place <main> before <Sidebar> in the DOM.

<Sidebar.Provider defaultOpen side="right">
  <main className="flex-1">...</main>
  <Sidebar>
    <Sidebar.Content>
      <Sidebar.Group>
        <Sidebar.GroupLabel>Details</Sidebar.GroupLabel>
        <Sidebar.Menu>
          <Sidebar.MenuButton icon={GearIcon} active>Properties</Sidebar.MenuButton>
          <Sidebar.MenuButton icon={ChartBarIcon}>Metrics</Sidebar.MenuButton>
        </Sidebar.Menu>
      </Sidebar.Group>
    </Sidebar.Content>
  </Sidebar>
</Sidebar.Provider>

API Reference

The main sidebar container. Renders as <aside> on desktop, Dialog sheet on mobile.

Component "Sidebar" not found in registry. Run pnpm build:ai-metadata to regenerate.

Sidebar.Provider

Context provider managing expand/collapse state and mobile detection.

Component "Sidebar.Provider" not found in registry. Run pnpm build:ai-metadata to regenerate.

Sidebar.Content

Scrollable middle section (flex-1 overflow-y-auto). Use Header / Footer to pin content above or below this scroll area.

Sidebar.MenuButton

Primary interactive element. Supports icons, active state, links, and auto-tooltip when collapsed. Auto-wraps in <li> — no MenuItem wrapper needed unless you have siblings like MenuAction.

Component "Sidebar.MenuButton" not found in registry. Run pnpm build:ai-metadata to regenerate.

Sidebar.MenuSubButton

Button inside a sub-menu for nested navigation. Auto-wraps in <li> — no MenuSubItem wrapper needed.

Component "Sidebar.MenuSubButton" not found in registry. Run pnpm build:ai-metadata to regenerate.

Sidebar.GroupContent

Animation wrapper — only needed for collapsible groups (provides the grid-rows height animation). For non-collapsible groups, place Menu directly inside Group.

Sidebar.Input

Search trigger button styled as an input. Typically opens a command palette.

Component "Sidebar.Input" not found in registry. Run pnpm build:ai-metadata to regenerate.