Material Design Navigation drawer
Documents navigation drawers as destination lists in a side or bottom sheet, including permanent and dismissible variants, active items, hierarchy, scrim behavior, and focus management when drawers close.
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Drawer | Choose drawer when users need page-adjacent detail, preview, metadata, comments, simple actions, or object inspection without leaving the current page. | The opener names or is adjacent to the object whose detail will appear in the drawer. | Material navigation drawer guidance provides contrast for destination-oriented drawers and modal scrim behavior. |
| Drawer with no close or return path | Flag this anti-pattern when a temporary drawer has no visible close control, no Escape path, no back-route dismissal, no equivalent for gesture-only close, or no predictable focus return. | Opening the drawer records the opener or selected object as the return target. | Supports drawer variants, scrim behavior, active destination state, and focus management when closing navigation drawers. |
| Navigation drawer | Choose a navigation drawer when destinations need occasional access from a constrained layout and can tolerate one extra open step. | The opener toggles or opens the drawer and exposes expanded or modal state as appropriate. | Material defines navigation drawer variants, destination list anatomy, scrim behavior, and modal dismissal routes. |
| Responsive navigation adaptation | Choose responsive navigation adaptation when the navigation surface itself must change across viewport, posture, orientation, or destination-count constraints. | The adapted surface changes presentation, not the user's destination model. | Supports modal, dismissible, and permanent drawer behavior used across adaptive layouts. |
| Side navigation | Choose side navigation when users need persistent access to related pages in one section or area. | Activating a side-nav item changes the local page and updates current-page semantics. | Material navigation drawer guidance clarifies the drawer variant and focus management when side navigation is dismissible. |
Comparisons supported by this source
- Drawer vs modal dialog vs navigation drawer vs filter panel
Material navigation drawer guidance supports the distinction between generic contextual drawers and destination drawers.
- Drawer with no close or return path vs drawer vs modal dialog vs navigation drawer vs details panel
Supports destination drawer variants, active items, scrim behavior, and focus management when drawers close.
- Navigation drawer vs side navigation vs bottom navigation
Material defines modal, dismissible, and permanent navigation drawer behavior, including scrim and dismissal routes.
- Responsive navigation adaptation vs global navigation vs bottom navigation vs navigation drawer vs side navigation vs header
Supports drawer variants, modal behavior, and persistent navigation behavior used as expanded-width alternatives.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: Material Design. Last checked: .