Back to Dictionary
Page & View Transitions
●○○Ready to Use
Drawer / Sidebar Slide
A panel that slides in from the left or right edge of the screen, pushing content or overlapping it with a dark backdrop.
Live Demo
Dashboard
Click the menu icon in the top left or the button below to open the sidebar drawer.
What It Is
A panel that slides in from the left or right edge of the screen, pushing content or overlapping it with a dark backdrop.
✓When to Use
- Mobile navigation menus
- Filtering and sorting options
- Detail inspection panels in dense dashboards
✕When NOT to Use
- Quick confirmations (use Modal or Toast)
Configuration Tips
- 01Slide in from the right for details/actions, from the left for global navigation
- 02Include a swipe-to-dismiss gesture for mobile users
You've Seen It In
LinearStripe DashboardShopify
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Add a sidebar drawer that slides in from the right when clicking the edit button. Include a dark backdrop.
Code Example (Tailwind CSS)
export function DrawerSidebarSlideDemo() {}