Drawer
A panel that slides in from the edge of the screen, useful for displaying supplementary content, navigation menus, or forms without leaving the current page context.
Basic Drawer
Drawer Sides
Navigation Drawer
Settings Drawer
Filters Drawer
Composable API
Non-dismissible Drawer
Props (Convenience API)
| Name | Type | Default | Description |
|---|---|---|---|
side | 'left' | 'right' | 'bottom' | 'right' | Side from which drawer slides in |
title | string | - | Drawer title (convenience API) |
description | string | - | Drawer description (convenience API) |
dismissible | boolean | true | Whether drawer shows close button |
open | boolean | - | Controlled open state |
onOpenChange | (open: boolean) => void | - | Open state change handler |
children | ReactNode | - | Drawer body content |
footer | ReactNode | - | Drawer footer content (convenience API) |
Composable Parts
| Name | Type | Default | Description |
|---|---|---|---|
DrawerRoot | Component | - | Root container component |
DrawerTrigger | Component | - | Trigger element wrapper |
DrawerContent | Component | - | Content container with slide animation |
DrawerHeader | Component | - | Header section container |
DrawerTitle | Component | - | Title text component |
DrawerDescription | Component | - | Description text component |
DrawerBody | Component | - | Scrollable body content container |
DrawerFooter | Component | - | Footer section for actions |
Drawer | Component | - | Convenience wrapper component |
Usage Guidelines
When to use
- •Use for navigation menus that don't need to be always visible
- •Display settings or configuration panels without leaving the current page
- •Show forms or multi-step workflows in a focused context
- •Provide filters or advanced search options on mobile devices
- •Display supplementary content that doesn't warrant a separate page
Best practices
- •Keep drawer content focused and relevant to the current task
- •Use right-side drawers for most scenarios (follows natural reading flow)
- •Use left-side drawers for navigation menus (convention)
- •Use bottom drawers on mobile for filters and actions
- •Include clear actions in the footer (Cancel, Save, Apply, etc.)
- •Provide a title and description for context
- •Allow dismissal by clicking outside or pressing Escape (unless critical action required)
Accessibility
- •ARIA role: dialog for screen reader announcement
- •Focus trap: Focus is trapped within drawer when open
- •Keyboard accessible: Escape to close, Tab to navigate
- •Focus management: Focus returns to trigger on close
- •ARIA attributes: aria-labelledby, aria-describedby for context
- •Portal rendering: Rendered at document body level for proper stacking
- •Backdrop: Semi-transparent overlay blocks interaction with page content
Do's and Don'ts
✓ Do
- •Provide clear actions in the footer (Save, Cancel, Apply)
- •Use descriptive titles and descriptions for context
- •Allow users to dismiss by clicking outside (for non-critical content)
- •Keep content focused and relevant to the current task
- •Use appropriate side based on content type (left for nav, right for forms)
Good: Clear title, description, and action buttons with focused content
✗ Don't
- •Overload the drawer with too much content or complex layouts
- •Nest drawers within drawers (use a wizard or multi-step form instead)
- •Use for content that requires full page context (use a separate page)
- •Forget to provide a way to close the drawer (unless critical action)
- •Use for critical alerts or confirmations (use Dialog instead)
Bad: Too much unrelated content crammed into a single drawer
Related Components
Dialog
Modal dialog for alerts, confirmations, and focused interactions
Popover
Floating panel for contextual content and actions
Sheet
Overlay panel for extended content and workflows