Skip to content

Navigation drawer

  • The navigation drawer slides in from the left and contains the navigation destinations for your app.
  • 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.

Resting elevation

16dp

  • Permanent
  • Persistent
  • Mini variant
  • Temporary

Specs

For specs Click Here.

Content

Elevation

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.

Selection state

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.

Dividers

All dividers in the nav drawer are full-bleed within the drawer with 8dp padding above and below each divider.

Scrolling

The navigation drawer scrolls in the same way a view scrolls.

Settings and support

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.

Behavior

Permanent

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:

  • Side nav width
  • Content width
  • 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.

Persistent

Persistent navigation drawers can toggle open or closed. 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.

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.

Apps sections that need quick selection access alongside content

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.

Required for: Mobile

The mini variant is also an acceptable closed state for a temporary navigation drawer.