Bottom Navigation

The bottom navigation allows users to quickly navigate from one section of the app to another.

Dos and Don'ts

Use minimum 3 and maximum 5 tabs for navigation across the app.
Make the navigation bar always visible. The exception is when an overlay is opened.
Use a clear visual hierarchy to indicate the currently active destination.

Don't

Don't change the tabs for a specific user flow. The navigation bar should be consistent across app screens.
Avoid using complex icons. Ensure the icons are simple and universally understood to minimise confusion.
Avoid long or complex wording; keep labels concise and direct.

Anatomy

A docked bottom navigation bar anchored at the bottom of a mobile screen.

Container: Provides a filled background.
Icon (selected): The icon is always filled and is visually distinguished from the inactive ones.
Label: Describes the purpose and function of the tab to provide clarity, especially for less common or ambiguous icons.
Home indicator: Navigation bar for accessing core system functions on Android.
Icon (unselected): Visually supports the label and doesn't have a fill.
Notification badge: Displays notifications, or counts on navigation items.

Variants

Docked

It's anchored at the bottom of the screen.

Floating

Sits on top of content.

Content

Label

Labels should always be one word with clear meaning to aid navigation through the app. Avoid long or complex wording; keep labels concise and direct.

Notification badge

Badges appear on top of the icon. They show the number of notifications in a specific tab. The badge will change size depending on the number of digits contained without changing position.

Position

Don't override the properties of the notification badge.

Character count

Allow for a maximum of 2 digits.
A plus (+) sign should be used if the number is higher than 2 digits.

Each context and case might require different logic on when to remove the notification badge or the number of digits allowed to display.

A bottom navigation bar showing notification badges with the maximum character count of two digits and a plus sign.

Overflow

Labels should not go over one line of text. If they do the text will truncate. Avoid this happening by keeping text label succinct and testing any translations across devices. Use alternative titles if translations are too long.