Sidebar
A two-column shell: a navigation column (sidebar slot) beside the children, hidden narrow or collapsed.
Group: Layout · Kind: macro · in the lite catalog
Preview
Section titled “Preview”Platforms
Section titled “Platforms”The same specimen painted by React, SwiftUI, Compose and gpui.
Variants
Section titled “Variants”| Prop | Type | Required | Bindable | Description |
|---|---|---|---|---|
side |
left | right |
– | – | Which edge the column sits on. Default "left". |
width |
number |
– | – | The column width in px. Default 240. |
collapseBelow |
never | sm | md | lg | xl |
– | – | Hides the column below this breakpoint. Default "md". |
collapsed |
boolean |
– | yes | Hides the column at any width; bind it to a toggle. Default false. |
Events
Section titled “Events”None.
sidebar: one component by id
Children
Section titled “Children”many
A2UI basic mapping
Section titled “A2UI basic mapping”No basic catalog component maps here.
Built from
Section titled “Built from”Accessibility
Section titled “Accessibility”Role: none
navigation landmark (the sidebar slot) beside main. Layout only; its sidebar part is a navigation landmark, its main part the main landmark ($a11y).
Not focusable; no keys.
Theming
Section titled “Theming”Recipe parts: Sidebar/root Sidebar/sidebar Sidebar/main
Keyed by: side :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover
Related
Section titled “Related”Box · Stack · Grid · Card · Separator · List · Resizable · ScrollArea