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
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
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
Container
Inactive icon
Inactive text label
Active icon
Active text label
Representing destinations
The way bottom navigation destinations are represented can depend on how many are used:
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.
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.
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
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.
Bottom navigation icons can include badges in their upper right corner. These badges can contain dynamic information, such as a number of pending requests.
- Badge
- Badge with a number
- Badge with a maximum character count
Scrolling
Upon scroll, the bottom navigation bar can appear or disappear:
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,...
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...
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.
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.
- Inactive destinations
- An active destination
When text labels are not used persistently (at all times), only active destinations are given text labels.
- Inactive destinations without text labels
- 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...
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...
Portrait
- Measurement 56
- Measurement 120
- Measurement 24
- Measurement 12
- Measurement 12
- Measurement 16
- Measurement 16
Minimum width
- Measurement min-width: 80dp
- Measurement 12
- Measurement 12
- Measurement 56
Maximum width
- Measurement 56
- Measurement max-width: 168dp
- Measurement 12
- Measurement 12
- Measurement 8
- Measurement 12
- Measurement 12
Landscape
- Measurement 56
- Measurement max-width: 168dp
- Measurement 12
- Measurement 12
- Measurement 24
- Measurement 16
- Measurement 16
- Measurement 8
- Measurement 12
- Measurement 12
Implementation
Bottom navigation implementation support for each platform is indicated below.
