(cache) Bottom navigation - Components - Google design guidelines

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.

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

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.

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.

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

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.

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

Fixed Bottom Navigation Bar

To calculate the width of each bottom navigation action, divide the width of the view by the number of actions. Alternatively, make all bottom navigation actions the width of the largest action.