Back to Components

Shell

Sidebar

Collapsible side panel with header / body / footer slots. Presentational — wire the collapsed state from your shell.

Examples

With NavItems

<Sidebar>
  <NavItem active>Library</NavItem>
  ...
</Sidebar>

Props

PropTypeDefaultDescription
collapsedbooleanfalseShrink to icon rail (collapsedWidth).
side'left' | 'right''left'Which border the panel attaches to.
widthstring'240px'Expanded width.
collapsedWidthstring'48px'Width when collapsed.
headerSnippetTop region.
footerSnippetBottom region.

Install

CLI

npx @a3tai/mittsu add sidebar