Sidebar

<Sidebar.Provider defaultOpen>
  <Sidebar>
    <Sidebar.Header>
      <span>Acme Inc</span>
    </Sidebar.Header>
    <Sidebar.Content>
      <Sidebar.Group>
        <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
        <Sidebar.GroupContent>
          <Sidebar.Menu>
            <Sidebar.MenuItem>
              <Sidebar.MenuButton icon={HouseIcon} active>
                Home
              </Sidebar.MenuButton>
            </Sidebar.MenuItem>
          </Sidebar.Menu>
        </Sidebar.GroupContent>
      </Sidebar.Group>
    </Sidebar.Content>
  </Sidebar>
  <main className="flex-1">...</main>
</Sidebar.Provider>

Installation

Barrel

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

Granular

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

Usage

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

export default function AppLayout({ children }) {
  return (
    <Sidebar.Provider defaultOpen>
      <Sidebar>
        <Sidebar.Header className="p-4">
          <span className="text-lg font-semibold">Acme Inc</span>
        </Sidebar.Header>
        <Sidebar.Content>
          <Sidebar.Group>
            <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.GroupContent>
              <Sidebar.Menu>
                <Sidebar.MenuItem>
                  <Sidebar.MenuButton icon={HouseIcon} active>
                    Home
                  </Sidebar.MenuButton>
                </Sidebar.MenuItem>
                <Sidebar.MenuItem>
                  <Sidebar.Collapsible>
                    <Sidebar.CollapsibleTrigger
                      render={
                        <Sidebar.MenuButton icon={CodeIcon}>
                          Compute
                          <Sidebar.MenuChevron />
                        </Sidebar.MenuButton>
                      }
                    />
                    <Sidebar.CollapsibleContent>
                      <Sidebar.MenuSub>
                        <Sidebar.MenuSubItem>
                          <Sidebar.MenuSubButton>
                            Workers
                          </Sidebar.MenuSubButton>
                        </Sidebar.MenuSubItem>
                      </Sidebar.MenuSub>
                    </Sidebar.CollapsibleContent>
                  </Sidebar.Collapsible>
                </Sidebar.MenuItem>
              </Sidebar.Menu>
            </Sidebar.GroupContent>
          </Sidebar.Group>
        </Sidebar.Content>
        <Sidebar.Footer>
          <Sidebar.Menu>
            <Sidebar.MenuItem>
              <Sidebar.MenuButton icon={GearIcon}>
                Settings
              </Sidebar.MenuButton>
            </Sidebar.MenuItem>
          </Sidebar.Menu>
        </Sidebar.Footer>
      </Sidebar>
      <main className="flex-1">{children}</main>
    </Sidebar.Provider>
  );
}

Examples

Basic

Sidebar with navigation groups, collapsible sub-menus, and active state indicators.

<Sidebar.Provider defaultOpen>
  <Sidebar>
    <Sidebar.Header>...</Sidebar.Header>
    <Sidebar.Content>
      <Sidebar.Group>
        <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
        <Sidebar.GroupContent>
          <Sidebar.Menu>
            <Sidebar.MenuItem>
              <Sidebar.Collapsible defaultOpen>
                <Sidebar.CollapsibleTrigger
                  render={
                    <Sidebar.MenuButton icon={CodeIcon}>
                      Compute
                      <Sidebar.MenuChevron />
                    </Sidebar.MenuButton>
                  }
                />
                <Sidebar.CollapsibleContent>
                  <Sidebar.MenuSub>
                    <Sidebar.MenuSubItem>
                      <Sidebar.MenuSubButton active>
                        Workers & Pages
                      </Sidebar.MenuSubButton>
                    </Sidebar.MenuSubItem>
                  </Sidebar.MenuSub>
                </Sidebar.CollapsibleContent>
              </Sidebar.Collapsible>
            </Sidebar.MenuItem>
          </Sidebar.Menu>
        </Sidebar.GroupContent>
      </Sidebar.Group>
    </Sidebar.Content>
  </Sidebar>
  <main className="flex-1">...</main>
</Sidebar.Provider>

Collapsed (Icon Only)

When collapsed, the sidebar shows icons only with tooltips on hover.

<Sidebar.Provider defaultOpen={false}>
  <Sidebar>
    <Sidebar.Content>
      <Sidebar.Group>
        <Sidebar.GroupContent>
          <Sidebar.Menu>
            <Sidebar.MenuItem>
              <Sidebar.MenuButton icon={HouseIcon} tooltip="Home" active>
                Home
              </Sidebar.MenuButton>
            </Sidebar.MenuItem>
          </Sidebar.Menu>
        </Sidebar.GroupContent>
      </Sidebar.Group>
    </Sidebar.Content>
  </Sidebar>
  <main className="flex-1">...</main>
</Sidebar.Provider>

Toggle

Use useSidebar() or Sidebar.Trigger to toggle expand/collapse.

function App() {
  return (
    <Sidebar.Provider defaultOpen>
      <Sidebar>
        <Sidebar.Content>...</Sidebar.Content>
        <Sidebar.Footer>
          <Sidebar.Menu>
            <Sidebar.MenuItem>
              <Sidebar.Trigger />
            </Sidebar.MenuItem>
          </Sidebar.Menu>
        </Sidebar.Footer>
      </Sidebar>
      <main className="flex-1">
        <ToggleButton />
      </main>
    </Sidebar.Provider>
  );
}

function ToggleButton() {
  const { toggleSidebar } = useSidebar();
  return <button onClick={toggleSidebar}>Toggle</button>;
}

Resizable

Enable drag-to-resize with resizable on the Provider and Sidebar.ResizeHandle inside the Sidebar.

<Sidebar.Provider defaultOpen resizable defaultWidth={240} minWidth={180} maxWidth={400}>
  <Sidebar>
    <Sidebar.Header>...</Sidebar.Header>
    <Sidebar.Content>...</Sidebar.Content>
    <Sidebar.Footer>...</Sidebar.Footer>
    <Sidebar.ResizeHandle />
  </Sidebar>
  <main className="flex-1">...</main>
</Sidebar.Provider>

Right Side

Use side="right" for a sidebar on the right edge.

<Sidebar.Provider defaultOpen side="right">
  <main className="flex-1">...</main>
  <Sidebar>
    <Sidebar.Header>Details</Sidebar.Header>
    <Sidebar.Content>...</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.MenuButton

Primary interactive element inside a menu item. Supports icons, active state, links, and auto-tooltip when collapsed.

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

Sidebar.MenuSubButton

Button inside a sub-menu item for nested navigation.

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

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.