navigation contract

Sidebar

Persistent vertical navigation. The default left rail in dashboards.

Variants

  • expanded
  • collapsed
  • rail
  • sheet

Sizes

  • sm
  • md
  • lg

Slots

  • header
  • nav
  • footer

Example

<Sidebar><SidebarHeader>Acme Inc.</SidebarHeader><SidebarNav>...</SidebarNav><SidebarFooter><UserCard /></SidebarFooter></Sidebar>

Usage rule

role="navigation" + aria-label="Primary".

The full Sidebar contract has 5 more rules, plus the do-not patterns. Get the full recipe.

Get the Sidebar contract in your project.