Side rail vs sidebar
Side rail is a fixed ~68px icon column — use inside AppShell (or flex row), not alone in a narrow box. Previews use 90% preview width and 90vh per variant so rail + main proportions match Lggr-style dashboards. NavItem placement="rail" with icon= and aria-label.
atelier — typical layout (App Shell)
Icon rail + scrollable main at desktop width.
Dashboard
Main column is children — rail width stays ~4.25rem.
Tables, logs, and detail views render here.
With CommandBar (Lggr list page)
Rail does not shrink when the main column adds filters — only the main area grows.
Dashboard
Command bar spans the main column only, not under the rail.
Footer slot (settings at bottom of rail)
Dashboard
Footer nav pins to the bottom of the rail column when content is short.
Icon as children (no icon prop)
Passing the SVG as children works when aria-label is set.
Rail items
Rail column only (width check at full height)
Same height as shell previews — shows the fixed rail width without main content.
Main column context (no shell)
SideRail is rarely used without App Shell — shown for comparison with Sidebar width.
← Sidebar ~16rem · SideRail ~4.25rem →
You still compose PageHeader in main
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| brand | Optional | ReactNode | — | Compact logo mark at top. |
| footer | Optional | ReactNode | — | Bottom icon slot (e.g. settings). |
| children | Optional | ReactNode | — | NavItem elements with placement=rail. |