Drawer
You might say
Open a details panel from the right, but keep the list behind it visible.
Slide in a side panel without leaving the current pageA drawer keeps the current page visible while showing details, filters, navigation, or a short editing task from the side. Make the boundary and close behavior clear. If the content needs a lot of space or has its own navigation, use a full page.
When to use it
- Mobile navigation
- Filter panel
- Record details
- A short edit that benefits from page context
When NOT to use it
- Use a narrow drawer for dense, complex content
- Open drawers inside drawers
- Let it cover essential context without a reason
- Hide how to close or return1Enter information2Confirm order3Complete payment
Anatomy
Task details ×
CloseSave
A panel that slides in from an edge and covers part of the page.
A title that makes the panel’s purpose clear
Use it for details, filters, or short forms that need more room than a popover.
Optional actions, such as Save or Close
Variants
Right
Task details ×
When viewing details or filling out a form
Left
Navigation ×
When hosting a navigation menu
Bottom
Share to ×
When selecting an action or sharing option on mobile
Typical use cases
Mobile menu
Homepage redesignIn progress
Review payment flowCompleted
Draft onboarding guideNot started
Task details×
In progress · Alex Chen
Product filters
Filter×
Status
☑ In Progress ☐ Completed
Owner
☑ Alex Chen ☐ maya-lee
Order details
Edit members×
Quick edit
Homepage
Component
Template
Settings