Bottom navigation

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


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 with caution (as space may not permit them).

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.


Behavior

Bottom navigation actions

Tapping a bottom navigation destination results in one of the following: Bottom navigation destinations don’t: The following guidance applies to Android only. Related Article arrow_downward

Read More

Tapping a bottom navigation destination results in one of the following:

  • It takes the user to the screen associated with it
  • On a visited section, it returns the user to their previous scroll position there
  • On the current section, it scrolls the page back to the top and may refresh it

Bottom navigation destinations don’t:

  • Open menus or dialogs

Tapping the navigation destination of a previously visited section returns the user to where they left off in that section.

Tapping the current bottom navigation destination takes the user to the top of the screen, and refreshes the content if applicable.

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.

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

Transitions

Swipe gestures do not navigate between bottom navigation views. Motion helps make a UI expressive and easy to use. Related Article arrow_downward When they appear,...

Read More

Swipe gestures do not navigate between bottom navigation views.

Do.

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

Don’t.

Avoid using lateral (left-and-right) motion to transition between views. Lateral motion is reserved for navigating related content, such as tabs.

When they appear, these items are displayed in front of the bottom navigation bar:

  • Bottom sheets
  • Navigation drawers
  • Keyboards

Bottom navigation can be temporarily covered by bottom sheets, navigation drawers, and keyboards.

Color

When a bottom navigation destination is active, color the icon and text label with the app’s primary color. In a UI, color has a variety...

Read More

When a bottom navigation destination is active, color the icon and text label with the app’s primary color.

Do.

Use the app’s primary color to indicate an active destination.

Don’t.

Avoid using different colored icons and text labels.

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

Do.

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

Don’t.

Ensure legible color contrast when placing colored icons and text on a colored bottom navigation bar.


Placement

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

Minimum width

Maximum width

Landscape


Implementation

Bottom navigation implementation support for each platform is indicated below.

Android Material Component

Status: Code Available

IOS Material Component

Status: Code Available

Flutter Material Component

Status: Code Available