Bottom navigation bars allow movement between primary destinations in an app.
Android check Web Not available Flutter iOS
Material Design 3 navigation bars are here
Updated navigation bars have a new name, taller container height, active state indicator shape, color mappings, dynamic color compatibility, and no elevation shadow.
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
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'tDon’t use a bottom navigation bar for fewer than three destinations (use tabs instead).
Don'tDon’t use more than five destinations. For those cases, try tabs or a navigation drawer.
CautionCombining 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.
There are three destinations in this bottom navigation, each with an icon and text label.
1. Container
2. Inactive icon
3. Inactive text label
4. Active icon
5. 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 if space permits.
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.
DoUse short text labels.
Don'tDon’t truncate text. The truncation may obscure important destination information.
Don'tDon’t shrink text to fit on a single line.
CautionAvoid wrapping text.
Icon & label colors
Active and inactive icons and text labels should have sufficient contrast with the container.
Active and inactive icons and text labels should have sufficient contrast with the container. The active destination’s icon and label should use your app’s Primary or a High-Emphasis “On” color depending on the component’s color scheme. Inactive icons and labels can use the Medium-Emphasis “On” color.
DoUse the Primary or High-Emphasis “On” color for the active destination in a bottom navigation bar.
Don'tDon’t use multiple or low-contrast colors in a bottom navigation bar, as they make it harder for users to distinguish the active item and navigate to other destinations.
Behavior
Navigation
Bottom navigation behaves differently on Android and iOS. When you select a bottom navigation item (one that’s not currently selected), each platform displays different outcomes:...
Bottom navigation behaves differently on Android and iOS. When you select a bottom navigation item (one that’s not currently selected), each platform displays different outcomes:
On Android: the app navigates to a destination’s top-level screen. Any prior user interactions and temporary screen states are reset, such as scroll position, tab selection, and in-line search.
On iOS: the destination reflects the user’s prior interaction. If the user previously visited that section of the app, they return to the last screen viewed (with its prior state preserved, if possible). Otherwise, the app navigates to the top-level screen.
Default platform navigation can be overridden when needed to improve the user experience. For example, an Android app that requires frequent switching between sections can preserve each section’s state. Or, an iOS app can return users to the top-level screen (or reset their scroll position) if it better suits the use case.
Mute
Unmute
On Android, revisiting a section resets the app, returning the user to its top-level screen.
Mute
Unmute
On iOS, when a user revisits a section they return to where they left off in that section, such as a detail screen.
When moving downward in the app’s hierarchy (from a parent screen to a child screen), a bottom navigation bar can be displayed persistently for quick navigation between an app’s sections.
Mute
Unmute
The bottom navigation bar in this music app remains in view when navigating to an album.
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.
1. Badge
2. Badge with a number
3. 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
Mute
Unmute
The bottom navigation bar can disappear to allow more space for content.
Transitions
An in-place cross-fade animation is recommended for transitions between bottom navigation destinations. Lateral (side-to-side) transitions may imply a peer relationship between the items that does...
A fade-through transition pattern is recommended for transitions between bottom navigation destinations. Lateral (side-to-side) transitions may imply a peer relationship between the items that does not exist, or mislead users into thinking they can use gestures to navigate between sections.
Mute
Unmute
DoTransition between active and inactive bottom navigation destinations using a cross-fade animation.
Mute
Unmute
Don'tAvoid using lateral motion to transition between views. Lateral motion is reserved for navigating between peers.
Only use bottom navigation on mobile and small tablet interfaces. On large screens, swap out bottom navigation bars for a component that’s better suited to large screen contexts.
Component swapping means that components with similar functions are swapped to make changes to an interface that enhance the ergonomics and functionality. Component swapping is triggered by pre-set device breakpoints. When a screen scales beyond a breakpoint, swappable components should change into a more appropriate component for a given screen size.
Mute
Unmute
Component swapping can create a cohesive navigation system that adapts across screen sizes.
At medium breakpoints, replace the bottom navigation bar with a navigation rail.
At large breakpoints, replace the navigation rail with a navigation drawer.
Small breakpoints: 360-599dp
For small devices like phones, horizontal space is at a premium; the content area of an app usually spans the entire width of a screen. In this case, smaller navigation components should anchor to the top or bottom of a layout, saving space while making primary destinations accessible.
Medium breakpoints: 600-1239dp
On medium-sized devices like tablets, move primary navigation elements into a navigation rail that is fixed to the leading edge of the layout.
Large breakpoints: 1240dp+
On devices with 1240dp+ widths, present destinations in a permanently visible or dismissible navigation drawer. Assign hierarchy based on how frequently or quickly a user needs to move between destinations.
Placement
Elevation
Bottom navigation can be temporarily covered by dialogs, bottom sheets, navigation drawers, the on-screen keyboard, or other elements needed to complete a flow. They should...
Bottom navigation can be temporarily covered by dialogs, bottom sheets, navigation drawers, the on-screen keyboard, or other elements needed to complete a flow. They should not be permanently obstructed on any screen.
Mute
Unmute
The search feature of the “Radio” screen triggers the on-screen keyboard, temporarily covering the bottom navigation bar until the search flow is completed.
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'tBottom navigation bar destinations don’t scroll.
Landscape view
DoOn 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.
DoOn 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.
1. Inactive destinations
2. An active destination
When text labels are not used persistently (at all times), only active destinations are given text labels.
1. Inactive destinations without text labels
2. An active destination with a text label
Material Design conducted research to understand the usability and design preferences for embedding a floating action button (FAB) in the bottom navigation bar. Preferences and rankings for the different designs were gathered from around 650 participants from the United States, twenty from India and ten from Brazil.
Research findings included:
Across all locations, participants liked the bottom navigation bar with an embedded, centered FAB because of the aesthetic and ergonomic benefits.
Across all locations, participants appreciated when navigation or common actions were incorporated in an easy-to-access area like the bottom navigation bar.
Design preferences for the shape of the bar varied by location. While many participants in the United States and Brazil favored the mini FAB, participants in India preferred an inset or overlapping FAB.
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.
Bottom navigation is available in the Material library for Jetpack Compose. Visit the library reference documentation on Android Developers to get started.
Before you can use the Material bottom navigation, you need to add a dependency
to the Material Components for Android library. For more information, go to the
Getting started
page.
Note: We have deprecated the
BottomNavigationView#setOnNavigationItemSelectedListener and
BottomNavigationView#setOnNavigationItemReselectedListener methods in favor of
the listeners in NavigationBarView. This allows you to share selection
handling code between the BottomNavigation and NavigationRail view elements.
Making bottom navigation accessible
You should set an android:title for each of your menu items so that screen
readers like TalkBack can properly announce what each navigation item
represents:
Note: The Widget.MaterialComponents.BottomNavigationView.PrimarySurface
style will automatically switch between between the component's primary colored
style in light theme and surface colored style in dark theme. More information
in the
Dark theme documentation.
On July 15, 2021, Material's iOS libraries will enter maintenance mode. Learn more.
Using bottom navigation
Installing
In order to install bottom navigation with Cocoapods first add it to your Podfile:
xxxxxxxxxx
Then, run the following command:
xxxxxxxxxx
From there, import the relevant target or file and instantiate your view.
Swift
xxxxxxxxxx
Objective-C
xxxxxxxxxx
Bottom navigation classes
MDCBottomNavigationBar is the iOS bottom navigation implementation. MDCBottomNavigationBar can be added to a view hierarchy like any UIView. Material Design recommends always placing bottom navigation components at the bottom of the screen.
MDCBottomNavigationBar works much like a UITabBar and both are populated with an array of UITabBarItem instances. However, MDCBottomNavigationBar is built with Material Design in mind and should be used with other Material Design components where possible to provide a consistent look and feel in an app. Additionally, while MDCBottomNavigationBar has similar features to MDCTabBar, MDCTabBar is chiefly intended for top navigation, whereas MDCBottomNavigationBar--as the name indicates--is intended for bottom navigation.
It is recommended that a bottom navigation bar contain anywhere from three to five items. If there are fewer than three destinations, consider using Material tabs instead. If your top-level navigation has more than six destinations, provide access to destinations not covered in bottom navigation through alternative locations, such as a navigation drawer.
Title visibility in MDCBottomNavigationBar can be configured in three ways:
To only show the title of the selected item.
To always show title regardless of any item's selection state
To never show title regardless of any item's selection state.
The default behavior of MDCBottomNavigationBar is to only show the title for an item that is selected.
In landscape orientation, items can be configured to be justified or compactly clustered together. When items are justified the bottom navigation bar is fitted to the width of the device. Justified items can have their titles shown below their respective icons or adjacent to their respective icons.
Making bottom navigation accessible
To help ensure your bottom navigation item is accessible to as many users as possible, please
be sure to review the following recommendations:
Ensure that your UITabBarItem instances have their accessibilityLabel properties set. Setting a new
accessibilityLabel on a UITabBarItem will result in the corresponding bottom navigation
bar item's accessibilityLabel changing.
Set an appropriate accessibilityValue value if your item has a badge value. For example,
an item with an inbox icon with a badge value for how many emails are unread. You should explicitly
set the accessibilityValue when the badge value doesn't provide enough context. For example, in an inbox
example simply having the value "10" doesn't provide enough context, instead the accessibility value should explain
what the badge value symbolizes. The default value if there is a badge value and you haven't set any
accessibilityValue will be that the accessibilityValue is the badgeValue.
The example above is a bottom navigation bar with Shrine theming. To get started with your own theming, first add the BottomNavigation+Theming subspec to your Podfile:
xxxxxxxxxx
Then run the installer:
xxxxxxxxxx
Then, import the relevant file or target and call the appropriate theming method.