Styles

Text
Colors
Icons

Components

Banners
Bottom navigation
Buttons
Empty states
Launch screen
Snackbar
Usage
Visual design
Interactions
Accessibility
iOS
Android
Bottom navigation
Last updated Sep 26, 2019

The Bottom Navigation is used to switch between the main sections of an app. It is placed at the bottom of the screen, and is effective in communicating the high-level organization within the app.

Related
Material Guidelines for Bottom navigation

Usage

Visual design

We are building upon Material's bottom navigation component. We are only detailing out changes made on top of it in this spec.

Light
Dark
Phone
Android Tablet
Phone
Android Tablet
Avoid using labels for widths < 360dp. Through testing we have found that at these widths there are overlaps and truncation.
Avoid using labels for widths < 360dp. Through testing we have found that at these widths there are overlaps and truncation.
Don't use bottom navigation without labels, on widths >= 360dp.
Don't use bottom navigation without labels, on widths >= 360dp.
Avoid increasing the size of the selected tab. We want to keep the size of all the tabs consistent.
Avoid increasing the size of the selected tab. We want to keep the size of all the tabs consistent.
Don't use labels that are really long, in excess of 14 characters. There is a high likelihood of overlap/truncation.
Don't use labels that are really long, in excess of 14 characters. There is a high likelihood of overlap/truncation.

Interactions

Long pressing on a bottom nav tab will show a tooltip. Use android:toolTipText to added a message.
Long pressing on a bottom nav tab will show a tooltip. Use android:toolTipText to added a message.

Accessibility

Talkback

The Material bottom navigation component already has inbuilt Talkback accessibility. Here are the details for it:

  • Selected item: Label: "Selected. Tab Name." Hint: "Double tap to activate".
  • Unselected item: "Tab Name." Hint: "Double tap to activate".
  • If there is a special action on clicking a tab, use a Hint to explain this. Eg: scrolling to Today on clicking the active Calendar tab—"Double tap to switch to Today."