Sidebar
Composable application chrome — collapsible to a rail, keyboard-toggleable, an overlay drawer on a phone.
Loading documentation…
Powered by heyo
Sidebar is the application chrome: a provider that owns the open state, a
panel composed from menus and groups, and an inset that holds the page. It
collapses to a rail of icons, toggles with ⌘B / Ctrl B, and turns into an
overlay drawer below 768px on its own.
It is deliberately not a panel. The sidebar shares the page background and a single hairline separates it — a sidebar lighter than the page reads as something floating on top of the application rather than part of it.
Sidebar.Provider wraps both the sidebar and the page, because the inset
reacts to the same state.
A branch is a Sidebar.Collapsible inside a Sidebar.MenuItem. MenuButton
wraps itself in an <li> by default, so pass unwrapped when you supply the
item yourself — as the trigger above does.
Every menu button takes render, so a navigation entry becomes whatever your
router uses while keeping the row's styling, active state and icon slot.
Shrinks to a rail: labels and badges fade out, icons stay. The reader keeps a map of the application.
Slides fully out of view. Use it when the content needs every pixel.
Always expanded — for a sidebar that is the whole interface.
Sidebar.Rail turns the hairline seam into a click target, which is what makes
the whole thing feel like real application chrome rather than a navigation
list. Anything that should disappear with the labels gets
group-data-[state=collapsed]/sidebar:hidden — the search field in the first
example does exactly that.
Anything below the provider can read or drive it — a header button, a keyboard handler of your own, a layout that shifts when the rail collapses.
Uncontrolled initial state. It defaults to true.
Controlled state. Pair it with onOpenChange.
Fires on every toggle, including the keyboard shortcut.
Expanded width, any CSS length. It defaults to "15rem".
Collapsed rail width. It defaults to "3.25rem".
The key that toggles the sidebar together with ⌘ or Ctrl. It defaults to
"b"; pass false to opt out.
The media query below which the sidebar becomes an overlay drawer. It
defaults to "(max-width: 767px)".
Which edge it sits on. It defaults to left.
How it collapses. It defaults to icon.
The leading glyph. It stays visible when the rail collapses.
Marks the entry as the current page.
Swaps the <button> for a link or a router component.
Skips the automatic <li> wrapper, for when you supply your own
Sidebar.MenuItem — needed around a Collapsible.
The three stacked regions. Content scrolls with the restyled native
scrollbar; Header and Footer stay put.
A titled section. The label fades out as the rail collapses.
The list structure. Menu is a <ul>; the buttons supply their own <li>
unless you pass unwrapped.
The trailing chip on a row — literally <Badge variant="count">, with the
one rule the sidebar adds: it disappears when the rail collapses.
The rotating chevron for a collapsible branch.
A nested section wired to the rail animation.
The toggle. Takes icon to replace the default glyph.
The hairline seam, doubling as a click target.
The content column that sits next to the sidebar.
Text that fades out as the rail collapses. Exported so a custom row can join the same animation.