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

Bottom navigation for easy exploration in Material Design

Usage

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.

Mobile bottom navigation bar in Material Design — The bottom navigation bar on mobile

Left navigation for larger displays in Material Design — 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)

Bottom navigation bar for top destinations in Material Design — Do.
The bottom navigation bar exposes the three to five top-level destinations of an app.

Use tabs if fewer than three destinations in Material Design — 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.

Bottom navigation bar with Material Design views — Do.
Views are fixed in a bottom navigation bar.

Material Design: Avoid scrollable content in bottom nav — Don’t.
Avoid scrollable content in the bottom navigation bar.

Bottom navigation bar with up to five Material Design destinations — Do.
Use up to five top-level destinations in a bottom navigation bar.

Limit bottom nav to 5 destinations for Material Design — 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

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.

Use consistent colors in Material Design icons and labels — 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.

Use black or white icons for colored Material Design bars — Do.
Use black or white iconography if the bottom navigation bar is colored.

Material Design: Don't pair colored icons with a colored bar — Don’t.
Avoid pairing colored icons with a colored bottom navigation bar.

Text Labels

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

Use short labels for bottom navigation in Material Design — Do.
Use short labels

Avoid using labels with wrapped text in bottom navigation for Material Design — Don’t.
Avoid labels with wrapping text

Avoid truncating text labels in bottom navigation for Material Design, as this may hinder comprehension — Don’t.
Avoid truncating text labels as doing so may prevent comprehension.

Avoid shrinking text labels to fit on a single line in Material Design bottom navigation — Don’t.
Avoid shrinking text labels to fit on a single line.

Behavior

The bottom navigation bar enables quick movement from deep in one topic to the top of another topic. Keep it available as the user descends the hierarchy, either by showing it persistently, or by concealing and revealing it upon scroll.

The bottom navigation bar shouldn’t be used for:

Views focused on a single task, such as an email “Compose” screen
Views containing user preferences or settings

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

Bottom navigation icons

Tapping on a bottom navigation icon takes you directly to the associated view, or refreshes the currently active view. Each icon must lead to a destination, and may not open menus or dialogs.