Feedback & Status

Drawer

A panel with swipe dismissal and optional vertical snap points.

Bottom drawer#

Side drawer#

Snap points#

Component parts#

Component	Purpose
`Drawer`	Root: `open`, `defaultOpen`, `onOpenChange`, `swipeDirection`, and snap-point props
`DrawerTrigger`	Opens the drawer; use `render={<Button />}` for Zen button styles
`DrawerContent`	Styled popup with portal, backdrop, viewport, and scrollable content
`DrawerTitle`	Accessible title; include one in every drawer
`DrawerDescription`	Optional accessible description
`DrawerClose`	Closes the drawer; supports `render`

swipeDirection defaults to down (bottom). Use up for top, left for left, or right for right. Snap points apply to vertical drawers. Set the content height to accommodate the largest snap point.

Component props#

Drawer#

Name	Type	Description
open	boolean	Controlled open state.
defaultOpen	boolean	Initial open state when uncontrolled (default: false).
onOpenChange	(open, eventDetails) => void	Called when the drawer opens or closes. Event details include the reason and a cancel method.
onOpenChangeComplete	(open: boolean) => void	Called after the opening or closing animation completes.
swipeDirection	'up' \| 'down' \| 'left' \| 'right'	Dismissal direction and edge placement (default: 'down').
modal	boolean \| 'trap-focus'	Controls focus trapping, scroll locking, and outside interaction (default: true). 'trap-focus' traps focus without locking page scrolling.
disablePointerDismissal	boolean	Prevents dismissal by outside presses and, for non-modal drawers, focus moving outside (default: false).
snapPoints	(number \| string)[]	Vertical snap positions. Numbers from 0 to 1 represent viewport-height fractions; larger numbers represent pixels. Strings accept px or rem units.
snapPoint	number \| string \| null	Controlled active snap point.
defaultSnapPoint	number \| string \| null	Initial snap point when uncontrolled.
onSnapPointChange	(snapPoint, eventDetails) => void	Called when the active snap point changes.
snapToSequentialPoints	boolean	Uses drag distance instead of velocity to choose the next snap point (default: false).
triggerId	string \| null	Identifies the active trigger when controlling the drawer.
defaultTriggerId	string \| null	Identifies the trigger for an initially open, uncontrolled drawer.
actionsRef	RefObject	Receives imperative close and unmount actions.
handle	DrawerHandle	Associates the drawer with detached triggers.
children	ReactNode \| function	Drawer parts, or a render function receiving the active trigger payload.

DrawerContent#

Name	Type	Description
children	ReactNode	Content displayed inside the drawer.
className	string \| (state) => string	Additional popup classes, optionally based on drawer state.
style	CSSProperties \| (state) => CSSProperties	Popup styles, including width or height.
initialFocus	boolean \| RefObject \| function	Controls where focus moves when the drawer opens.
finalFocus	boolean \| RefObject \| function	Controls where focus returns when the drawer closes.
portalProps	Drawer.Portal.Props	Portal options, including a custom container and keepMounted.
render	ReactElement \| function	Customizes the popup element.

The forwarded ref targets the popup element. Standard div attributes and event handlers are also supported.

DrawerTrigger and DrawerClose#

Name	Type	Description
children	ReactNode	Button content.
render	ReactElement \| function	Customizes the button element. The examples use a Zen Button.
disabled	boolean	Disables the button (default: false).
nativeButton	boolean	Set to false when render uses a non-button element (default: true).
className	string \| (state) => string	Additional button classes.

DrawerTrigger also accepts id to identify the trigger, handle to associate a detached trigger with a drawer, and payload to pass data to the root's render function. Both components support standard button attributes and event handlers.

DrawerTitle and DrawerDescription#

Name	Type	Description
children	ReactNode	Title or description content.
render	ReactElement \| function	Customizes the rendered element.
className	string \| (state) => string	Additional element classes.
style	CSSProperties \| (state) => CSSProperties	Additional element styles.

Include a DrawerTitle to give the drawer an accessible name. DrawerDescription supplies an optional accessible description.

PreviousDialog NextEmpty