Skip to content

Lateral navigation

The navigation region holds navigational components and elements such as the navigation drawer or navigation rail. It helps users navigate between destinations in an app or to access important actions.

Principles

Identifiable: The placement and list-style content of navigation drawers clearly identify them as navigation.

Organized: Navigation drawers order destinations according to user importance, with frequent destinations first and related ones grouped together.

Contextual: Navigation drawers CAN be shown or hidden to accommodate different app layouts.

Use cases

Navigation drawers provide access to destinations and app functionalities. They CAN either be permanently on-screen or controlled by a navigation menu icon.

Navigation drawers are recommended for:

  • Apps with five or more top-level destinations.
  • Apps with two or more levels of navigation hierarchy.
  • Quick navigation between unrelated destinations.

Standard navigation drawer

Standard drawers allow interaction with both screen content and the drawer at the same time. They CAN be used on table and desktop, but aren’t suitable for mobile due to limited screen size.

Modal navigation drawers block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.

They are primarily for use on mobile where screen space is limited, and CAN be replaced by standard drawers on tablet and desktop.

Behavior

An accepted behavior for the standard navigation drawer is a dismissible drawer. It CAN be used when users are likely to focus on screen content and require less frequent access to its navigation destinations. They SHOULD use a visible navigation menu icon to open and close the drawer.

Users may want to collapse the standard navigation drawer into a navigation rail to increase information density and maximize available screen space, while still allowing access to other app destinations. This is recommended when each top destination has a distinctive icon.

In case no icons are used for the top destinations, the rail SHOULD NOT be used.

The navigation drawer MUST be completely hidden when clicking the navigation button on the app bar to dismiss it.

Modal navigation drawers are always opened by an affordance outside the drawer, such as a navigation menu icon in a top app bar.

Modal drawers CAN be dismissed by:

  • Selecting a drawer item.
  • Tapping the navigation menu icon.
  • Tapping the scrim.
  • Swiping toward the drawer’s anchoring edge (e.g. swiping right-to-left for a left-aligned navigation drawer).

Navigation drawers CAN also be vertically scrolled, independent of the rest of the screen’s content and UI. If the list of navigation destinations is longer than the height of the drawer, the drawer’s contents CAN be scrolled within the drawer.

Design guidelines

Anatomy

Navigation drawers have a container, items with inactive text, active text and an active text overlay for destinations, optional dividers, subtitles for destination groups, and a scrim for modal navigation drawers.

  1. Container
  2. Header (optional, modal only)
  3. A destination
  4. Divider (optional)
  5. Subtitle (optional, with horizontal divider)
  6. Scrim (modal only)
Container

The destinations of a navigation drawer are contained within a side sheet. Navigation drawers that open from the side are placed on the left of the screen for a left-to-right language. The container is 256 dp wide with a white background.

The header area of a navigation drawer is a space that can be used for brand expression (such as an app title or logo).

Destinations

Destinations in a navigation drawer take the form of actionable list items. Each item describes its destination using a text label and optional iconography. There CAN be a maximum of 3 hierarchy levels when using a multilevel list.

Text labels SHOULD be clear and short enough that they aren’t cut off by the sheet.

Keep text labels concise, but truncate them if they extend beyond the container width

Don’t wrap label text and don’t shrink text size in order to fit a text label on a single line

Icons CAN supplement labels as indicators of a destination. They SHOULD always be placed before text. Use recognizable icons when conventions exist.

If a top destination has an icon, all the other top destinations MUST have one as well. Don’t use the same icon to represent different primary destinations.

Secondary destinations CAN be represented by the same icon, especially if they are part of a collection.

Dividers

Optional: horizontal dividers CAN be used to separate groups of navigation destinations within the list. They extend across the full width of the drawer.

Don’t use dividers to separate individual destinations.

Subtitle

Optional: when using horizontal dividers, subtitles CAN be applied to identify the destinations’ group name.

Scrim

Modal only: navigation drawers use a scrim to block interaction with the rest of the app. It's placed below the drawer’s sheet and CAN be tapped or clicked to dismiss the drawer.

States

The destinations within a navigation drawer take the form of list items. Each item CAN be active, inactive, focused, pressed, and hover.

  1. Inactive: Default state for items in a navigation drawer.
  2. Active: The current screen, or its parent, is represented with an activated state. Only one item in a navigation drawer CAN be activated at a time.
  3. Focus.
  4. Hover.
  5. Pressed.

Use a font-weight of 600 (semibold) and a distinctive background color for active items.

If an active item is located inside a multilevel list, then all its predecessors MUST have a font-weight of 600 and only the last item has a different background color.

Specs

Units used in the examples represent dp.

There is a distinction between modal and standard navigation for icon sizes.

On mobile, tablet or desktop the size for destination icons MUST be 20x20 px.

The font size and icon sizes are summarized as follows:

Items and destinations Font size (px) Font weight Icon size (px)
Subtitles 14 Regular Don't use icons
Tablet and desktop (standard navigation)
First level 14 Regular 20
Second level 12 Regular 20 (multilevel icon only)
Third level 12 Regular Don't use icons
Mobile (modal navigation)
Header 18 Semibold 24 (app icon only)
First level 14 Regular 20
Second level 12 Regular 20 (multilevel icon only)
Third level 12 Regular Don't use icons

Principles

Ergonomic: The navigation rail is a compact arrangement that puts high-priority destinations within reach on large screens.

Consistent: The rail SHOULD appear consistently on the same side of each screen in an app.

Adaptative: The rail complements adaptive and responsive navigation patterns.

Usage

The rail is a side navigation component that displays three to seven app destinations. Each destination is represented by an icon and a tooltip on hover.

The rail CAN function on its own at larger screen sizes, such as desktop and tablet.

When to use

  • Top-level destinations that need to be accessible anywhere in an app
  • Three to seven main destinations in a product
  • Tablet or desktop layouts

When not to use

  • Small screen sizes
  • Single tasks, such as viewing a single email
  • Secondary navigation destinations

Behavior

Destinations in the navigation rail SHOULD remain visible when scrolling vertically.

Design guidelines

Anatomy

Navigation rails CAN have 3 main elements:

  1. Container
  2. A destination
  3. Divider (optional)
Container

The navigation rail sits below the app bar, on the left side of the screen and MUST always run vertically along the layout. The container is 72 dp wide by default with a white background.

Destinations

Users are taken to the top-level destination associated with an icon when selected.

Navigation rail destinations are always represented by icons that CAN symbolize the content or the nature of a destination. No multilevel elements under the top-level destinations are shown.

Dividers

Optional: A divider CAN help separate the rail from app content. The divider SHOULD be positioned on the edge of the rail container that’s adjacent to the app’s content area.

States

Destinations in the navigation rail CAN be active, inactive, focused, or pressed.

States are communicated through opacity and text to show when a destination is active or inactive. States are used to show pressed, focused, hover, and unselected states.

Active states are fully opaque and use the app’s primary color by default.

  1. Inactive: Default state
  2. Active: Only one item in a navigation drawer CAN be activated at a time
  3. Focused
  4. Hover
  5. Pressed

Specs

Units used in the example represent dp.