Drawer
A panel that slides in from the edge of the screen.
When To Use
Use the Drawer component when you need to:
- Provide quick access to content or actions without leaving the current page
- Display additional information or forms in a side panel
- Create a menu that slides in from the edge of the screen
- Implement a mobile navigation pattern
- Show contextual information related to the current view
Drawers are particularly useful for mobile interfaces or when you need to preserve context while accessing additional functionality.
Examples
Drawer side:
Props
Drawer
| Prop | Type | Default |
|---|---|---|
fadeFromIndex? | number | - |
snapPoints? | (string | number)[] | - |
preventScrollRestoration? | boolean | - |
container? | HTMLElement | null | - |
snapToSequentialPoint? | boolean | false |
repositionInputs? | boolean | true when {@link snapPoints } is defined |
disablePreventScroll? | boolean | false |
defaultOpen? | boolean | false |
direction? | "top" | "bottom" | "left" | "right" | 'bottom' |
onClose? | (() => void) | - |
nested? | boolean | - |
modal? | boolean | true |
onRelease? | ((event: PointerEvent<HTMLDivElement>, open: boolean) => void) | - |
dismissible? | boolean | true |
handleOnly? | boolean | false |
fixed? | boolean | - |
scrollLockTimeout? | number | 500ms |
setBackgroundColorOnScale? | boolean | true |
shouldScaleBackground? | boolean | - |
onOpenChange? | ((open: boolean) => void) | - |
noBodyStyles? | boolean | - |
closeThreshold? | number | 0.25 |
open? | boolean | - |
setActiveSnapPoint? | ((snapPoint: string | number | null) => void) | - |
activeSnapPoint? | string | number | null | - |