Sidebar

Collapsible vertical navigation

Preview

Sidebar opens inside this container

The sidebar opens within this demo area without affecting the main layout sidebar.

Props
variant

Sidebar edge placement

collapsible

Allows toggle open/closed

pushContent

Pushes adjacent content when open

width

Sidebar width

Code
<Sidebar
  open={open}
  onToggle={() => setOpen(!open)}
  items={[
    { label: 'Item 1', onClick: () => {} },
    { label: 'Item 2', onClick: () => {} },
  ]}
  variant="left"
  width="12rem"
  collapsible
/>