Surfaces
AppShell
Two columns on a desktop, a drawer on a phone.
Examples
default
Content well
Notes
Two columns on a desktop, one column and a drawer on a phone.
The drawer closes on Escape as well as on the scrim, because a drawer that only closes by tapping outside it strands a keyboard user inside a menu they cannot leave. The scrim is a <button> for the same reason — a <div> with an onClick is not reachable by keyboard and not announced as anything.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| sidebarrequired | ReactNode | Navigation content for the sidebar (e.g. a stack of `NavItem`s). | |
| brand | ReactNode | Optional brand lockup pinned to the top of the sidebar. | |
| topbar | ReactNode | Optional content for the sticky topbar, laid out after the mobile toggle. |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- The drawer closes on Escape as well as on the scrim, so a keyboard user is not stranded inside it.
- The scrim is a <button>, because a div with an onClick is neither reachable nor announced.