Drawer Composition
A modal edge panel for page navigation or a longer contextual task. It is a separate interaction contract from Modal and Popover even though Base UI supplies the same proven focus and dismissal foundation.
Usage
<Drawer open={open} onOpenChange={setOpen} title="Pages"> <nav>...</nav></Drawer>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| open / defaultOpen | boolean | — | Controlled or uncontrolled open state. |
| onOpenChange | (open: boolean) => void | — | Fires for backdrop, Escape, close control, and controlled changes. |
| title | ReactNode | — | Required accessible name. |
| description | ReactNode | — | Optional accessible description. |
| footer | ReactNode | — | Persistent actions at the bottom edge. |
| trigger | ReactNode | — | Optional uncontrolled trigger. |
Do
Use Drawer for mobile page navigation or a contextual workflow that belongs at the screen edge.
Don't
Add a drawer placement to Modal or use Popover for modal navigation.
Keyboard
Escape closes it. Tab and Shift+Tab stay inside while open. Focus returns to its trigger.