The navigation drawer slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
The nav drawer spans the full height of the screen, including behind the status bar. Everything behind the drawer is still visible but darkened by a scrim.
After a list item is selected, that item changes color to match the app’s primary color (or #000000 100%) to indicate selection. Additionally, the touch ripple highlights the row of that list item.
If the color of the touch ripple/highlight doesn’t contrast enough with your primary color, use a darker tint of the primary color.
All dividers in the nav drawer are full-bleed within the drawer, 8dp padding above and below each divider.
The navigation drawer scrolls in the same way a view scrolls.
Settings and support are located at the bottom of the scrolling list, inline with the rest of the list content. They refer to Help, Feedback, or Help & feedback, depending on what your product offers.
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
The structure and behavior of the overall interface determines which type of permanent navigation drawer to use:
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.
Persistent navigation drawers are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation.
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.
Apps sections that need quick selection access alongside content
Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected.
The mini variant is also an acceptable closed state for a temporary navigation drawer.