A drawer is a panel that slides in from an edge of the screen to present navigation or supplementary content without leaving the current context.
Figma
The Figma reference for Drawer will appear here once the design link is added.
Storybook
Interactive examples for Drawer will render here once the Storybook link is wired in.
Best practices
- Use a temporary drawer for navigation or secondary content on smaller screens.
- Use a permanent or persistent drawer for primary navigation that should stay visible on larger screens.
- Provide a clear way to open and close the drawer.
- Keep drawer content focused on navigation or a single supplementary task.
Do’s and don’ts
Do
Slide in supplementary navigation or filters, then let people return to their context.
Don’t
Force critical, blocking decisions into a drawer — use a dialog instead.
Accessibility
- A temporary drawer traps focus while open and restores it to the trigger on close.
- Support closing with the Escape key and a visible close control.