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.
You can say this to an AI Agent
Open a shipping-address editor in a right drawer while preserving the order and scroll position behind it. Add a title, close control, and save feedback, then test focus, return position, and mobile layout.
When to use it
- Mobile navigationTask details
- Filter panelFilterIn progressCompletedConfirm
- Record detailsEdit memberAlex ChenEmailSave
- A short edit that benefits from page contextHomeComponentsTemplatesSettings
When NOT to use it
- Use a narrow drawer for dense, complex contentConfirm deletion?CancelDelete
- Open drawers inside drawersStatistics3 records total
- 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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Quick check