https://framer.com/m/Drawer-3QWN.js
DrawerX
DrawerX slides a panel in from an edge of the screen and puts whatever you like inside it. The panel only exists once the trigger is used, so the specimens below show the triggers — click one in the canvas or on the published page to open the drawer.
Examples
Live specimens for every control the component exposes.
Default
A trigger with a drawer attached. Click it to open — a static render cannot show the panel.
Open drawer
Direction
direction picks the edge. Bottom suits a phone; right suits a detail panel beside a list.
from bottom
direction bottom
from top
direction top
from left
direction left
from right
direction right
Size
pixels is the width of a left or right panel and, for a top or bottom one, its height — goal overrides that with snap points the drag can settle on. A short drawer reads as a sheet; a tall one takes over the view.
160px
goal 160px
420px
goal 420px
Modal and close
modal decides whether the page behind is blocked; closeButton adds an explicit way out rather than relying on the backdrop, and closeButtonStyle sets how that control looks. a11yTitle is what a screen reader announces.
modal + close
modal true · closeButton true
non-modal
modal false · closeButton false · backgroundEffect false
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for DrawerX
A secondary view should arrive without leaving the page.
The panel belongs to an edge — a filter set, a detail view, a form.
The reader should be able to dismiss it by tapping outside.
It needs to sit above the rest of the page.
Reach for something else
A plain modal or dialog would do, with no sliding.
The panel should be permanently visible — that is a sidebar.
The content is a single line of text.
Io — UI Basics
Every trigger above is wired to a live DrawerX instance with a slotted panel. The panel is only rendered once the drawer opens, which a static page cannot capture.