Do

• Use the navigation bar for two to five core destinations.
• Use the navigation bar on mobile and small tablet interfaces.
• Keep the title of destinations short and concise.

Don't

• Don’t use the navigation bar if there is only one destination or if there are more than five, use the navigation drawer instead.
• Don’t use the navigation bar on tablets, use the navigation rail or the standard navigation drawer instead.
• Don’t wrap, truncate or shrink text.

A. Icon

Meaningful icons visualize the app destinations. Use filled icons for the selected destination and unfilled icons for unselected destinations.

B. Active Indicator

The active indicator highlights the selected destination.

C. Label Text

The label text provides a short and concise description of the destination.

D. Large Badge with Value (Optional)

The large badge with value shows a number for status changes.

E. Small Badge (Optional)

The small badge displays a change, for example, a new notification.

F. Container

The container contains all destinations including icons, active indicator, and optional labels.

Navigation bar anatomy

When the user taps on a destination or if one is focused on the navigation bar, the user is directed to the navigation destination associated with that icon. Navigation between destinations is visually highlighted by the active indicator and the filled icon.

Selecting another destination in the navigation bar

When scrolling up or down on the screen, the navigation bar remains fixed.

Scrolling up and down while the navigation bar remains fixed