Bottom navigation

Bottom navigation bars allow movement between primary destinations in an app.

Developer documentation

Platform

Status

Android

Available

iOS

Available

Web

Planned

Flutter

Available


Usage

Bottom navigation bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.

Principles

Bottom navigation is ergonomic, consistent, and top-level

Read More

Ergonomic

The bottom navigation bar is easy to reach on a handheld mobile device.

Consistent

When used, the bottom navigation bar appears at the bottom of every screen.

Related

Bottom navigation bar destinations should be of equal importance.

When to use

Bottom navigation should be used for top-level destinations

Read More

Bottom navigation should be used for:

  • Top-level destinations that need to be accessible from anywhere in the app
  • Three to five destinations
  • Mobile or tablet only

Bottom navigation shouldn’t be used for:

  • Single tasks, such as viewing a single email
  • User preferences or settings

Don’t.

Don’t use a bottom navigation bar for fewer than three destinations (use tabs instead).

Don’t.

Don’t use more than five destinations. For those cases, try tabs or a navigation drawer.

Caution.

Combining bottom navigation and tabs may cause confusion, as their relationship to the content may be unclear. Tabs share a common subject, whereas bottom navigation destinations are top-level and disconnected from each other.

Scaled down 50%.


Anatomy

  1. Container

  2. Inactive icon

  3. Inactive text label

  4. Active icon

  5. Active text label

Representing destinations

The way bottom navigation destinations are represented can depend on how many are used:

Read More

The way bottom navigation destinations are represented can depend on how many are used:

  • Three destinations: Display icons and text labels for all destinations.
  • Four destinations: Active destinations display an icon and text label. Inactive destinations display icons, and text labels are recommended.
  • Five destinations: Active destinations display an icon and text label. Inactive destinations use icons, and use text labels if space permits.

There are three destinations in this bottom navigation, each with an icon and text label.

Icons

Bottom navigation destinations always include an icon. It’s best to pair icons with text labels, especially if the icon doesn’t have obvious meaning.

Read More

Bottom navigation destinations always include an icon. It’s best to pair icons with text labels, especially if the icon doesn’t have obvious meaning.

Icons paired with text labels in bottom navigation

Text Labels

Text labels provide short, meaningful descriptions of bottom navigation destinations.

Read More

Text labels provide short, meaningful descriptions of bottom navigation destinations.

Do.

Use short text labels.

Don’t.

Don’t truncate text. The truncation may obscure important destination information.

Don’t.

Don’t shrink text to fit on a single line.

Caution.

Avoid wrapping text.

Icon & Label Colors

Active and inactive icons and text labels should have sufficient contrast with the container. The active destination’s icon and label should use your app’s Primary...

Read More

Active and inactive icons and text labels should have sufficient contrast with the container. The active destination’s icon and label should use your app’s Primary or a High-Emphasis “On” color depending on the component’s color scheme. Inactive icons and labels can use the Medium-Emphasis “On” color.

Do.

Use the Primary or High-Emphasis “On” color for the active destination in a bottom navigation bar.

Don’t.

Don’t use multiple or low-contrast colors in a bottom navigation bar, as they make it harder for users to distinguish the active item and navigate to other destinations.


Behavior

Navigation

Bottom navigation behaves differently on Android and iOS. When you select a bottom navigation item (one that’s not currently selected), each platform displays different outcomes:...

Read More

Bottom navigation behaves differently on Android and iOS. When you select a bottom navigation item (one that’s not currently selected), each platform displays different outcomes:

  • On Android: the app navigates to a destination’s top-level screen. Any prior user interactions and temporary screen states are reset, such as scroll position, tab selection, and in-line search.
  • On iOS: the destination reflects the user’s prior interaction. If the user previously visited that section of the app, they return to the last screen viewed (with its prior state preserved, if possible). Otherwise, the app navigates to the top-level screen.

Default platform navigation can be overridden when needed to improve the user experience. For example, an Android app that requires frequent switching between sections can preserve each section’s state. Or, an iOS app can return users to the top-level screen (or reset their scroll position) if it better suits the use case.

On Android, revisiting a section resets the app, returning the user to its top-level screen.

On iOS, when a user revisits a section they return to where they left off in that section, such as a detail screen.

When moving downward in the app’s hierarchy (from a parent screen to a child screen), a bottom navigation bar can be displayed persistently for quick navigation between an app’s sections.

The bottom navigation bar in this music app remains in view when navigating to an album.

Badges

Bottom navigation icons can include badges in their upper right corner. These badges can contain dynamic information, such as a number of pending requests.

Read More

Bottom navigation icons can include badges in their upper right corner. These badges can contain dynamic information, such as a number of pending requests.

  1. Badge
  2. Badge with a number
  3. Badge with a maximum character count

Scrolling

Upon scroll, the bottom navigation bar can appear or disappear:

Read More

Upon scroll, the bottom navigation bar can appear or disappear:

  • Scrolling downward hides the bar
  • Scrolling upward reveals it

The bottom navigation bar can disappear to allow more space for content.

Transitions

An in-place cross-fade animation is recommended for transitions between bottom navigation destinations. Lateral (side-to-side) transitions may imply a peer relationship between the items that does...

Read More

An in-place cross-fade animation is recommended for transitions between bottom navigation destinations. Lateral (side-to-side) transitions may imply a peer relationship between the items that does not exist, or mislead users into thinking they can use gestures to navigate between sections.

Do.

Transition between active and inactive bottom navigation destinations using a cross-fade animation.

Don’t.

Avoid using lateral motion to transition between views. Lateral motion is reserved for navigating between peers.


Placement

Elevation

Bottom navigation can be temporarily covered by dialogs, bottom sheets, navigation drawers, the on-screen keyboard, or other elements needed to complete a flow. They should...

Read More

Bottom navigation can be temporarily covered by dialogs, bottom sheets, navigation drawers, the on-screen keyboard, or other elements needed to complete a flow. They should not be permanently obstructed on any screen.

The search feature of the “Radio” screen triggers the on-screen keyboard, temporarily covering the bottom navigation bar until the search flow is completed.

Fixed navigation bar

Bottom navigation bar destinations have fixed positions. They don’t scroll or move horizontally.

Read More

Bottom navigation bar destinations have fixed positions. They don’t scroll or move horizontally.

Don’t.

Bottom navigation bar destinations don’t scroll.

Landscape view

Do.

On mobile (in landscape mode) or tablet, bottom navigation destinations can retain the same spacing used in portrait mode, rather than being equally distributed across the bottom app bar.

Do.

On mobile (in landscape mode) or tablet, bottom navigation destinations can be positioned horizontally instead of stacked. In this case, it’s recommended that destinations are evenly distributed across the entire bar.


States

Bottom navigation destinations may be active, inactive, focused or pressed.

Bottom navigation uses opacity and text to show when a destination is active. States are used to show pressed, focused, and unselected states.

Inactive destination states are represented with reduced opacities; active states have full opacity.

  1. Inactive destinations
  2. An active destination

When text labels are not used persistently (at all times), only active destinations are given text labels.

  1. Inactive destinations without text labels
  2. An active destination with a text label

Theming

Owl Material Theme

This educational app’s bottom navigation bar has been customized using Material Theming. Areas of customization include color and typography. Owl is an educational app that...

Read More

This educational app’s bottom navigation bar has been customized using Material Theming. Areas of customization include color and typography.

Owl's customized bottom navigation bar

Color

Owl's bottom navigation bar uses custom color on three elements: the container, activated items, and inactive items.

Element

Category

Attribute

Value

Container

Primary Blue

Color

Opacity

#0336FF

100%

Active icon, active text

On Primary

Color

Opacity

#FFFFFF

100%

Inactive icons

On Primary

Color

Opacity

#FFFFFF

76%

Typography

Owl's bottom navigation bar uses custom typography for text labels.

Element

Category

Attribute

Value

Text label

Caption

Typeface

Font

Size

Case

Rubik

Regular

12

All caps


Specs

Mobile

12dp #6200ee #6200ee R98 G0 B238 Elevation 8dp All measurements are displayed in device-independent pixels (dps) 12dp #6200ee #6200eeff R98 G0 B238 A1.00 All measurements...

Read More

Portrait

  • Measurement 56
  • Measurement 120
  • Measurement 24
  • Measurement 12
  • Measurement 12
  • Measurement 16
  • Measurement 16

Minimum width

  • Measurement min-width: 80dp
  • Measurement 12
  • Measurement 12
  • Measurement 56

Maximum width

  • Measurement 56
  • Measurement max-width: 168dp
  • Measurement 12
  • Measurement 12
  • Measurement 8
  • Measurement 12
  • Measurement 12

Landscape

  • Measurement 56
  • Measurement max-width: 168dp
  • Measurement 12
  • Measurement 12
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 8
  • Measurement 12
  • Measurement 12