Dialog's edge-anchored sibling — same modal behavior (focus trap,
scroll lock, Escape/backdrop dismiss), but docked to a side of the viewport instead of centered.
Kept as its own component rather than a Dialog prop: the two have different enough layout needs
that sharing one component would mean threading side-specific CSS through Dialog for every
consumer.
tsx
<Drawer side="right" title="Settings">
...
</Drawer>side
title
Examples
side picks which edge it slides in from — "left" is the common choice for primary navigation,
"right" (the default) for a details/settings panel:
tsx
<Drawer side="left" title="Navigation" trigger={<IconButton icon="menu" aria-label="Menu" />}>
<NavLinks />
</Drawer>Same trigger/controlled-open split as Dialog — reach for a
controlled Drawer when something other than its own trigger button should open it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | — | — |
| description | text | — | — |
| onOpenChange | readonly | — | — |
| open | boolean | — | — |
| side | top | right | bottom | left | right | Which edge the drawer slides in from. |
| title * | text | — | — |
| trigger | readonly | — | A single focusable element that opens the drawer on click. Omit for a fully controlled drawer. |