Components Navigation drawer

Navigation drawer

The navigation drawer helps users navigate apps that have multiple views.

The drawer rests on a sheet of material that slides down from the top of the screen, containing either navigation tabs to other views or simple icon shortcuts on a single page.

Navigation drawer
Navigation drawer

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

If an app has multiple views, use a navigation drawer to allow users to traverse content. For example, a navigation drawer allows users to switch between multiple inboxes in an email app.

Multiple pages


In the drawer, each tab links to an app view. Use this version if you don’t expect your user to quickly switch between app views

Usage

Example of a navigation bar spread across multiple pages

Single-page


If your icons are clear and you expect users to quickly switch between app views, use the single-page option.

Usage

Example of a navigation bar on a single page

Developer documentation

Behavior Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Switching between views

To open the navigation drawer, swipe down from the top of the screen. To switch between views, swipe left or right to navigate to the desired view.

Opening and using the navigation drawer

Peeking and hiding

Navigation drawers have a peeking behavior, where the content of each view “peeks” into visibility either when opened or when the user scrolls to the top of the view.

After being open for five seconds without interaction, the navigation drawer will be hidden.

Navigation drawer peeking behavior