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
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.
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.
Text labels
Text labels provide short, meaningful descriptions of bottom navigation destinations.
Text labels provide short, meaningful descriptions of bottom navigation destinations.
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.
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.
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.
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.
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
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.
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.
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.
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.
Landscape view
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.
When text labels are not used persistently (at all times), only active destinations are given text labels.
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.
A typical layout would look something like this:
xxxxxxxxxx
The @menu/bottom_navigation_menu resource should point to a file named
bottom_navigation_menu.xml inside a menu resource directory:
xxxxxxxxxx
Note:BottomNavigationView does not support more than 5 menu items.
In code:
xxxxxxxxxx
There's also a method for detecting when navigation items have been reselected:
xxxxxxxxxx
That results in:
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:
xxxxxxxxxx
The labelVisibilityMode attribute can be used to adjust the behavior of the
text labels for each navigation item. There are four visibility modes:
LABEL_VISIBILITY_AUTO (default): The label behaves as “labeled” when there
are 3 items or less, or “selected” when there are 4 items or more
LABEL_VISIBILITY_SELECTED: The label is only shown on the selected
navigation item
LABEL_VISIBILITY_LABELED: The label is shown on all navigation items
LABEL_VISIBILITY_UNLABELED: The label is hidden for all navigation items
Adding badges
Initialize and show a BadgeDrawable associated with menuItemId, subsequent
calls to this method will reuse the existing BadgeDrawable:
xxxxxxxxxx
As a best practice if you need to temporarily hide the badge (e.g. until the
next notification is received), change the visibility of BadgeDrawable:
xxxxxxxxxx
To remove any BadgeDrawables that are no longer needed:
xxxxxxxxxx
See the BadgeDrawable documentation for more information
about badges.
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.