Sidebar

Install

Pull Sidebar from the barrel for everyday use, or the granular path when you want a tighter bundle.

import { Sidebar } from "@brika/clay";

import { Sidebar } from "@brika/clay/components/sidebar";

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

/**
 * Sidebar is an app-shell component, it consumes a SidebarProvider context that wraps the whole app surface. A live preview inside a doc card is misleading: in real use the sidebar fills the viewport edge. Show a static screenshot-style preview here. The full doc page in apps/ui demonstrates the actual integration.
 */
export default function SidebarDefaultDemo() {
  return (
    <div className="flex w-full max-w-md overflow-hidden rounded-lg border border-clay-hairline">
      <div className="flex w-44 flex-col gap-2 border-clay-hairline border-r bg-clay-canvas p-3">
        <p className="font-medium font-mono text-[0.625rem] text-clay-subtle uppercase tracking-wider">
          Workspace
        </p>
        <ul className="space-y-0.5 text-clay-default text-sm">
          <li className="rounded bg-clay-control px-2 py-1 font-medium text-clay-strong">
            Dashboard
          </li>
          <li className="px-2 py-1">Plugins</li>
          <li className="px-2 py-1">Settings</li>
        </ul>
      </div>
      <div className="flex-1 bg-clay-elevated p-4 text-clay-subtle text-sm">Main content</div>
    </div>
  );
}

Accessibility

• › SidebarProvider exposes collapsed state via context, sync aria-expanded on the toggle button.
• › The sidebar should have role="navigation" or role="complementary" depending on content.
• › The default keyboard shortcut Cmd+B should be announced via aria-keyshortcuts on the trigger.
• › Rail-collapsed state hides labels visually; ensure icon-only items still carry aria-label.

Theme tokens

Every CSS variable Sidebar reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Sidebar without touching component code.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.sidebar, the names are camelCase versions of the variable suffix.

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "sidebar": {
      "width": "16rem"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-sidebar-…) — see the chips on each token row.

API reference

Props specific to Sidebar. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.