Drawer

A full-screen panel that slides in from an edge: a navigation drawer, a mobile menu, or a bottom action sheet. Built on React Native's Modal, so it floats over the whole app on iOS, Android, and the web. For a small contextual menu, reach for Dropdown or RowMenu instead.
Drawer provides an overlay host inside its own window. Dropdown, Select, and other anchored children render above the panel without being clipped by its corners; no additional OverlayProvider is needed inside the drawer. A tap outside an open child menu dismisses that menu, and Escape dismisses the child before the drawer. Nested drawers each keep their overlays in their own window.
On iOS, VoiceOver's accessibility escape gesture requests dismissal of the foremost open child before the drawer. Android system back uses the same child ownership. A controlled child that stays open continues to own later requests; one request never falls through to its parent. The scrim remains a pointer target, and the built-in trigger opens the drawer. Sidebar drill-down navigation has its own back behavior; accessibility escape dismisses the overlay rather than navigating a sidebar level. Focus restoration remains platform-dependent.
Give a controlled drawer an accessibilityLabel when it has no built-in trigger. A drawer with a trigger uses the trigger label as its modal name.
iOS
Android
Web
tsx
<Drawer trigger="Open menu">
<Column padLoose cozy>
<Typography lead semibold>Menu</Typography>
<Button ghost block>Home</Button>
<Button ghost block>Components</Button>
<Button ghost block>Settings</Button>
</Column>
</Drawer>

Props

Prop
Description
children
ReactNode
Panel content.
open
boolean
Controlled open state. Omit for uncontrolled (a `trigger` opens it).
onOpenChange
(open: boolean) => void
Fired when the open state changes (trigger press, scrim tap, back/escape).
trigger
string
Label for an optional outline trigger button. When set, the drawer renders the button and opens itself on press (uncontrolled). Omit when you drive `open` yourself.
left
boolean
A full-height panel on the left edge (default).
right
boolean
A full-height panel on the right edge.
bottom
boolean
A sheet spanning the width, rising from the bottom.
top
boolean
A sheet spanning the width, dropping from the top.
width
number
Width of a side drawer in px (default 288). Ignored for the bottom/top sheet.
accessibilityLabel
string
Accessible name for the modal surface. Required when the drawer has no trigger whose label can name it.
testID
string
E2E hook forwarded to the root element.
style
StyleProp<ViewStyle>
Outer layout composition for the panel surface, never a restyle hook. (Device safe-area insets are applied automatically.)

Do & Don’t

Right tool for the job

Don’t
Use a full-screen Drawer for a small contextual menu; covering the whole screen for two choices is disorienting. Use a Dropdown or RowMenu anchored to the trigger.
Do
Use a Drawer for primary navigation or a full sheet of actions that should take over the screen on a phone.
← Drag & drop
FilterPanel →