The nav drawer spans the height of the screen, with everything behind it visible but darkened by a scrim.
The navigation drawer follows the keylines and metrics for lists.
16dp
Permanent
Persistent
Mini variant
Temporary
Typography
Keylines and margins
Icons align at screen left and right margins: 16dp
Icon values: 54% #000000
Content associated with an icon or avatar left margin: 72dp
Side nav width: Equal to the screen width minus the height of the action bar. In the example shown above, the nav drawer is 56dp from the right edge of the screen.
Maximum width: The maximum width of the nav drawer is 280dp on mobile and 320dp on tablet. This is calculated by multiplying the standard increment by five (the standard increment is 56dp on mobile and 64dp on tablet).
Use 16dp horizontal margins on mobile and 24dp on tablet
Vertical spacing
Add 8dp padding at the top and bottom of every list grouping. One exception is at the top of a list with a subheader, because subheaders contain their own padding.
The nav drawer spans the full height of the screen, including behind the status bar, at a resting elevation of 16dp. Everything behind the drawer is still visible but darkened by a scrim.
Nav drawer on Android
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.
List item selected
Touch ripple/highlight
Touch ripple/highlight
Touch ripple/highlight
Touch ripple/highlight
Touch ripple/highlight
All dividers in the nav drawer are full-bleed within the drawer with 8dp padding above and below each divider.
Example of a divider
8dp vertical spacing
The navigation drawer scrolls in the same way a view scrolls.
Navigation drawer before scrolling
Navigation drawer during scrolling
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.
Settings and support are located at the bottom of the scrolling list.
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:
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 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.
When the drawer is outside of the page grid and opens, 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.
Don’t.
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 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