Product primitive · Navigation

Sidebar

A headless navigation boundary with controllable panels, targeting, dismissal, and focus restoration.

Live playground

Choose the right layer

Use @lenso/primitives/sidebar when the product owns all layout and visual styling.
Use @lenso/ui/sidebar for the token-styled Lenso navigation treatment.
The primitive supplies state and semantic parts; your application supplies destinations, spacing, persistence, and responsive behavior.

Behavior

Use open and onOpenChange for controlled state, or defaultOpen for local state.
Wrap independent panels in Sidebar.Group when a trigger needs to target a Root by ID.
Escape closes the panel and returns focus to its trigger. Sidebar.Item supports a rendered router link and exposes selection through aria-current.

Implementation

This example uses the headless API. Add your own layout and styles around the parts.

import { Sidebar } from "@lenso/primitives/sidebar";

export function WorkspaceShell() {
  return (
    <Sidebar.Root defaultOpen>
      <Sidebar.Trigger>Toggle navigation</Sidebar.Trigger>
      <Sidebar.Panel aria-label="Workspace navigation">
        <Sidebar.Header>Workspace</Sidebar.Header>
        <Sidebar.Content>
          <Sidebar.Menu>
            <Sidebar.MenuItem>
              <Sidebar.Item selected>Overview</Sidebar.Item>
            </Sidebar.MenuItem>
          </Sidebar.Menu>
        </Sidebar.Content>
      </Sidebar.Panel>
    </Sidebar.Root>
  );
}