Components Bottom navigation

Bottom navigation

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.

Bottom navigation is primarily for use on mobile. To achieve a similar effect for desktop, use side navigation.

Usage

  • Three to five top-level destinations
  • Destinations requiring direct access

Color

Tint the active icon with the app’s primary color. Use black or white if the bottom navigation bar is already colored.

Specs

  • Width of each action: The width of the view divided by the number of actions (with a max of 168dp and a minimum of 80dp)
  • Height: 56dp
  • Icon: 24 x 24dp

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

Bottom navigation provides quick navigation between top-level views of an app. It is primarily designed for use on mobile.

Larger displays, like desktop, may achieve a similar effect by using side navigation. For instance, the compact “rail” treatment displays navigational icons by default.

The bottom navigation bar on mobile

Left navigation on a larger display, such as tablet or desktop

When to use

Bottom navigation should be used for:

  • Three to five top-level destinations of similar importance (alternative: a persistent navigation drawer accessible from anywhere in the app)
  • Destinations requiring direct access from anywhere in the app (alternative: tabs for only one or two destinations)
Do.

The bottom navigation bar exposes the three to five top-level destinations of an app.

Don't.

If there are fewer than three destinations, consider using tabs instead.

If your top-level navigation has more than six destinations, provide access to destinations not covered in bottom navigation through alternative locations, such as a navigation drawer.

Do.

Views are fixed in a bottom navigation bar.

Don't.

Avoid scrollable content in the bottom navigation bar.

Do.

Use up to five top-level destinations in a bottom navigation bar.

Don't.

Avoid using more than five destinations in bottom navigation as tap targets will be situated too close to one another.

Bottom navigation and tabs

Be cautious when combining bottom navigation with tabs, as the combination may cause confusion when navigating an app. For example, tapping across both tabs and bottom navigation could display a mixture of different transitions across the same content.

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

Icons and text

Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons.

Style each action according to the following conditions:

  • When the view is in focus, display that view’s icon and text label
  • When there are only three actions, display both icons and text labels at all times
  • If there are four or five actions, display inactive views as icons only

Color

Tint the current bottom navigation action (including the icon and any text label present) with the app’s primary color.

Do.

Use the app’s primary color to indicate the view in focus.

Don't.

Avoid using different colored icons and text labels.

If the bottom navigation bar is colored, make the icon and text label of the current action black or white.

Do.

Use black or white iconography if the bottom navigation bar is colored.

Don't.

Avoid pairing colored icons with a colored bottom navigation bar.

Text Labels

Text labels provide short, meaningfully definitions to bottom navigation icons. Avoid long text labels as these labels do not truncate or wrap.

Do.

Use short labels

Don't.

Avoid labels with wrapping text

Don't.

Avoid truncating text labels as doing so may prevent comprehension.

Don't.

Avoid shrinking text labels to fit on a single line.

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

Tapping on a bottom navigation icon takes you directly to the associated view, or refreshes the currently active view.

Each bottom navigation icon must lead to a destination, and may not open menus or other pop-ups.

On Android, the Back button does not navigate between bottom navigation bar views.

Tapping on the active action in the bottom navigation bar will navigate the user to the top of the view.

Navigation through the bottom navigation bar should reset the task state.

The bottom navigation bar can appear and disappear dynamically upon scrolling:

  • Scrolling downward hides the bottom navigation bar
  • Scrolling upward reveals it

The bottom navigation bar can disappear and reappear to allow immersive content views.

The bottom navigation bar remains in view when navigating through the app’s hierarchy.

Using swipe gestures on the content area does not navigate between views.

Do.

Transition between active and inactive views using a cross-fade animation.

Don't.

Avoid using lateral motion to transition between views.

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

Fixed bottom navigation bar

To calculate the width of each bottom navigation action, divide the width of the view by the number of actions:

Width of action = Width of entire view / Number of actions

For example, if a view is 360dp wide, and there are three actions, each action should be 120dp wide.

Desktop and larger views
Alternatively, make all bottom navigation actions the width of the largest action.

Fixed bottom navigation bar on mobile

Fixed bottom navigation bar on mobile

Width minimum and maximum (these values include padding):

  • Maximum: 168dp
  • Minimum: 80dp

Height:
56dp

Icon:
24 x 24dp

Content alignment:
Text and icon are centered horizontally within the view.

Padding:

  • 6dp above icon (active view), 8dp above icon (inactive view)
  • 10dp under text
  • 12dp left and right of text

Text label:

  • Roboto Regular 14sp (active view)
  • Roboto Regular 12sp (inactive view)

80dp min width
12dp padding

168dp max width
12dp padding

56dp height
12dp left and right of text
10dp under text

Example of bottom navigation bar

Fixed bottom navigation bar on landscape mobile

56dp height
24 x 24dp icon
6dp above icon (active view)
8dp above icon (inactive view)
10dp under text

Fixed bottom navigation bar on tablet
56dp height
24 x 24dp icon
6dp above icon (active view)
8dp above icon (inactive view)
10dp under text

Shifting bottom navigation bar

Width minimum and maximum (this includes padding):

Active view

  • Maximum: 168dp
  • Minimum: 96dp

Inactive view

  • Maximum: 96dp
  • Minimum: 56dp

Height:
56dp

Icon:
24 x 24dp

Content alignment:
Text and icon are centered horizontally within view.

Padding:

  • 6dp above icon (active view), 16dp above and below icon (inactive view)
  • 10dp under text

Text label:
Roboto Regular 14sp (active view)

Shifting bottom navigation bar on mobile
56dp height
24 x 24dp icon
6dp above icon (active view)
10dp under text
6dp below icon
16dp below icon with no title

Shifting bottom navigation bar on mobile

Active view: 96dp min width

Active view: 168dp max width

Inactive view: 56dp min width

Inactive view: 96dp max width

Text labels may use the maximum width on the active view.

Text labels may use the maximum width on the active view.

Shifting bottom navigation bar on landscape mobile
56dp height
24 x 24dp icon
6dp above icon (active view)
10dp under text
6dp below icon
16dp below icon with no title

Shifting bottom navigation bar on tablet
56dp height
24 x 24dp icon
6dp above icon (active view)
10dp under text
6dp below icon
16dp below icon with no title

Elevation

Because snackbars have a lower (6dp) elevation, they appear behind the bottom navigation bar (8dp elevation).

Bottom sheets, navigation drawers, and keyboards appear in front of the bottom navigation bar, temporarily covering it.

Snackbars appear behind the bottom navigation bar.

Bottom sheets and keyboards appear in front of the bottom nav bar, temporarily covering it.

Orthographic view of app structure