Permanent
Recommended default for desktop
Permanent
navigation drawers are always visible and pinned to the left edge, at
the same elevation as the content or background. They cannot be closed.
The threshold for pinning is calculated using these minimum values:
1. Side nav width
2. Content width
3. Content padding
Types of permanent navigation drawers
The structure and behavior of the overall interface determines which type of permanent navigation drawer to use:
- Full-height navigation drawer: Apps focused on information consumption that use a left-to-right hierarchy
- Navigation drawer clipped under the app bar: Apps focused on productivity that require balance across the screen
- Floating navigation drawer: Apps that require less hierarchy
Example of a permanent, full-height drawer
Example of a permanent, clipped drawer
Example of a permanent, floating drawer
Example of a permanent, floating drawer in card
Persistent
Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. The state of the drawer is remembered from action to action and session to session.
Sitting outside of the page grid, when opened the drawer forces other content to change size and adapt to the smaller viewport.
Persistent navigation drawers are acceptable for all sizes larger than mobile.
Example of a closed persistent drawer
Example of an open persistent drawer
Persistent navigation drawers are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation.
Mini variant
In this variation, the persistent navigation drawer changes its width. Its resting state is as a mini-drawer at the same elevation as the content, clipped by the app bar. When expanded, it appears as the standard persistent navigation drawer.
Recommended for:
Apps sections that need quick selection access alongside content
Example of a mini drawer
Example of open persistent drawer
Temporary
Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected.
Recommended for:
Tablet
Required for:
Mobile
Example of a closed temporary drawer on mobile
Example of an open temporary drawer on mobile
The mini variant is also an acceptable closed state for a temporary navigation drawer.
Example of a closed temporary drawer on tablet
Example of an open temporary drawer on tablet
Example of a closed temporary drawer on desktop
Example of an open temporary drawer on desktop