Theme
Sidebar
A sidebar beside the main content that stacks when the content would get too narrow: it responds to its container, not the viewport.
Examples
Sidebar (16rem)
Main content takes the rest of the row. Narrow the window to see it wrap.
Props
Sidebar
A sidebar and the main content side by side, stacking when the content gets too narrow.
| Prop | Type | Default | Description |
|---|---|---|---|
gap | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | — | |
side | ReactNode | — | The sidebar. |
placement? | "end" | "start" | "start" | Which edge the sidebar sits on; it keeps its place in reading order either way. |
children | ReactNode | — |
Accessibility
- No interaction of its own: it is static content, so there is nothing to operate by keyboard.
- Built from logical properties (inline and block), so it mirrors in right-to-left text.
- The sidebar keeps its place in reading order whichever edge it is drawn on.