Drawer
A panel that slides in from an edge.
Bottom drawer
Use a bottom drawer for a secondary task on narrow screens. It opens from the bottom edge by default and shows a grab handle. Swipe down to close it.
Side panel
Use a side panel for details on wide screens. Set swipeDirection="right" on Drawer.Root to open it from the right edge.
Non-modal reference panel
Use this for reference content that the user reads while they work on the page. Set modal={false} to remove the backdrop. Add disablePointerDismissal so page clicks do not close it.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Use a drawer for a secondary task that keeps the page in view. For a focused task that interrupts the page, use Dialog.
- Put the body in
Drawer.Contentand the actions inDrawer.Footer, after the content. - Users close a drawer by swiping it toward its edge. Mouse users drag the header.
API
Props that the library adds. Every part also takes all the Base UI props.
Drawer.Root
| Prop | Type | Default | Description |
|---|---|---|---|
| modal | boolean | 'trap-focus' | true | Controls modal behavior. false and 'trap-focus' remove the backdrop and allow outside interaction. 'trap-focus' keeps focus in the drawer. |
Drawer.Header
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | – | The title text. The header labels the drawer with it. |
| showCloseButton | boolean | true | Shows a close button at the right of the header. |
| className | string | – | Classes for the header. |
Drawer.Footer
| Prop | Type | Default | Description |
|---|---|---|---|
| separator | boolean | false | Adds a top divider and equal padding above and below the actions. |
| children | ReactNode | – | The actions of the drawer. |
Drawer.Popup
| Prop | Type | Default | Description |
|---|---|---|---|
| container | HTMLElement | ShadowRoot | RefObject | null | – | The element that the drawer renders into. The default is the document body. |