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.

When to use

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

Representing destinations

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.

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.

Landscape view

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.