'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Overlays
Drawer
A panel that slides in from a side for filters, details or navigation.
Ant Design: Drawer
import { DrawerTrigger, Drawer, DrawerContent } from '@alea/ui';
Examples
Drawer
From the end by default; start and bottom too.
Props
Drawer props
A panel that slides in from the side: filters, details, navigation on mobile. Focus is trapped, Escape closes.
| Prop | Type | Default | Description |
|---|---|---|---|
placement | "start" | "end" | "bottom" | 'end' | Side it slides in from. Default end (right in left-to-right). |
size | string | number | 420 | Width (start/end) or height (bottom). Default 420 px. |
Accessibility
- A modal dialog: focus moves in and stays there; Escape closes.
Keyboard
| Key | Does |
|---|---|
| Escape | Closes |
| Tab | Cycles inside |
Do and don't
Do
- Give it a title.
Don't
- Don't put a whole page flow in a drawer.