Bottom navigation

Bottom navigation bars allow movement between primary destinations in an app.

Android check Web Not available Flutter iOS

Bottom navigation bar showing 4 destinations with icons and labels. One destination is active

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

Illustration of bottom navigation bar with concentric circles centered on the first destination

Ergonomic

The bottom navigation bar is easy to reach on a handheld mobile device.

Illustration of three app screens with bottom navigation bar at bottom of each

Consistent

When used, the bottom navigation bar appears at the bottom of every screen.

Illustration depicting relatedness

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
Bottom navigation bar showing 2 destinations. One destination is active
Don'tDon’t use a bottom navigation bar for fewer than three destinations (use tabs instead).
Bottom navigation bar showing 6 destinations. One destination is active
Don'tDon’t use more than five destinations. For those cases, try tabs or a navigation drawer.
App screen with tabs on top, and bottom navigation on bottom. Both have active destinations
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.

Image is 50% scale.

Anatomy

Numbered diagram showing the elements of bottom navigation
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.
Bottom navigation with 3 destinations indicated by icons and text
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.

Bottom navigation with 4 destinations indicated by icons and text
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.

Bottom navigation with 3 destinations indicated by icons and text
DoUse short text labels.
Bottom navigation with 4 destinations indicated by icons and text. The active destination's text is truncated
Don'tDon’t truncate text. The truncation may obscure important destination information.
Bottom navigation with 4 destinations indicated by icons and text. The active destination uses a smaller font size
Don'tDon’t shrink text to fit on a single line.
Bottom navigation with 4 destinations, one of which has 2 lines of text
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.

Bottom navigation with 4 destinations. 1 item is active
DoUse the Primary or High-Emphasis “On” color for the active destination in a bottom navigation bar.
Bottom navigation with 4 navigations, each has a different color
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.

On Android, revisiting a section resets the app, returning the user to its top-level screen.
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.

The bottom navigation bar in this music app remains in view when navigating to an album.

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.

Bottom navigation with 3 types of badges
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
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.

DoTransition between active and inactive bottom navigation destinations using a cross-fade animation.
Don'tAvoid using lateral motion to transition between views. Lateral motion is reserved for navigating between peers.

Scaling and adaptation

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.

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.

Bottom navigation in a sample UI

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.

Navigation rail in a sample UI

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.

Navigation rail in a sample UI

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.

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.

Scrollable bottom navigation with some destinations cut off from the screen
Don'tBottom navigation bar destinations don’t scroll.

Landscape view

Icons and labels for destinations are stacked and centered, leaving padding to the left and right of the set of destinations
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.
Landscape mode with the labels of bottom navigation items placed to the side of the icon
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.

Side by side view of two examples of bottom navigation, highlighting the difference between inactive and active destinations
1. Inactive destinations
2. An active destination

When text labels are not used persistently (at all times), only active destinations are given text labels.

2 examples of bottom navigation highlighting the difference between inactive destinations without text labels and an active destination with a text label
1. Inactive destinations without text labels
2. An active destination with a text label

Research

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...

Color

Owl's bottom navigation bar uses custom color on three elements: the container, activated items, and inactive items.

Diagram of bottom navigation indicating container, active icon, and inactive icons. It includes color values for each element
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.

Diagram of the Rubrik typeface applied to text at Regular, 12 pt, all caps
Element Category Attribute Value
Text label Caption Typeface
Font
Size
Case
Rubik
Regular
12
All caps

Specs

Mobile

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
 

Using bottom navigation

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:

The @menu/bottom_navigation_menu resource should point to a file named bottom_navigation_menu.xml inside a menu resource directory:

Note:BottomNavigationView does not support more than 5 menu items.

In code:

There's also a method for detecting when navigation items have been reselected:

That results in:

Bottom navigation bar with a white background, one selected purple icon and
another unselected icon.

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:

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

Bottom navigation with 3 icons with badges, an icon only badge and two
numbered badges showing 99 and
999+

Initialize and show a BadgeDrawable associated with menuItemId, subsequent calls to this method will reuse the existing BadgeDrawable:

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:

To remove any BadgeDrawables that are no longer needed:

See the BadgeDrawable documentation for more information about badges.

Bottom navigation bar

Example bottom navigation bar with four icons along the bottom: favorites,
music, places, and news. The music icon is
selected

Bottom navigation bar example

API and source code:

The following example shows a bottom navigation bar with four icons:

  • Favorites
  • Music note
  • Places
  • News

Bottom navigation bar with favorites, music note, places, and news icons

In layout.xml:

In bottom_navigation_menu.xml inside a menu resource directory:

In code:

Anatomy and key properties

The following is an anatomy diagram for the bottom navigation bar:

Bottom navigation anatomy diagram

  • (1) Container
  • Navigation items:
    • (2) Inactive icon
    • (3) Inactive text label
    • (4) Active icon
    • (5) Active text label

Container attributes

ElementAttributeRelated methodsDefault value
Colorapp:backgroundTintN/A?attr/colorSurface
Elevationapp:elevationsetElevation8dp
ElementAttributeRelated methodsDefault value
Menu resourceapp:menuinflateMenu
getMenu
N/A
Ripple (inactive)app:itemRippleColorsetItemRippleColor
getItemRippleColor
?attr/colorOnSurface at 8% (see all states)
Ripple (active)""?attr/colorPrimary at 8% (see all states)
Label visibility modeapp:labelVisibilityModesetLabelVisibilityMode
getLabelVisibilityMode
LABEL_VISIBILITY_AUTO

Icon attributes

ElementAttributeRelated methodsDefault value
Iconandroid:icon in the menu resourceN/AN/A
Sizeapp:itemIconSizesetItemIconSize
setItemIconSizeRes
getItemIconSize
24dp
Color (inactive)app:itemIconTintsetItemIconTintList
getItemIconTintList
?attr/colorOnSurface at 60%
Color (active)""?attr/colorPrimary

Text label attributes

ElementAttributeRelated methodsDefault value
Text labelandroid:title in the menu resourceN/AN/A
Color (inactive)app:itemTextColorsetItemTextColor
getItemTextColor
?attr/colorOnSurface at 60%
Color (active)""?attr/colorPrimary
Typography (inactive)app:itemTextAppearanceInactivesetItemTextAppearanceInactive
getItemTextAppearanceInactive
?attr/textAppearanceCaption
Typography (active)app:itemTextAppearanceActivesetItemTextAppearanceActive
getItemTextAppearanceActive
?attr/textAppearanceCaption

Styles

ElementStyleContainer colorIcon/Text label color (inactive)Icon/Text label color (active)
Default styleWidget.MaterialComponents.BottomNavigationView?attr/colorSurface?attr/colorOnSurface at 60%?attr/colorPrimary
Colored styleWidget.MaterialComponents.BottomNavigationView.Colored?attr/colorPrimary?attr/colorOnPrimary at 60%?attr/colorOnPrimary
Dark theme supported styleWidget.MaterialComponents.BottomNavigationView.PrimarySurface?attr/colorPrimary in light theme
?attr/colorSurface in dark theme
?attr/colorOnPrimary at 60% in light theme
?attr/colorOnSurface at 60% in light theme
?attr/colorOnPrimary in light theme
?attr/colorPrimary in dark theme

Default style theme attribute: ?attr/bottomNavigationStyle

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.

See the full list of styles, navigation bar attributes, and bottom navigation attributes.

Theming a bottom navigation bar

Bottom navigation supports Material Theming and can be customized in terms of color and typography.

Bottom navigation theming example

API and source code:

The following example shows a bottom navigation bar with Material Theming.

Bottom navigation bar with brown icons (favorites, music, places, news) and
pink background

Implementing bottom navigation theming

Using theme attributes and a style in res/values/styles.xml (themes all bottom navigation bars and affects other components):

Or using a default style theme attribute, styles, and a theme overlay (themes all bottom navigation bars but does not affect other components):

Or using the style in the layout (affects only this specific bottom navigation bar):

No Android implementation guidance available
No Web implementation guidance available

Using bottom navigation

Before you can use Material BottomNavigationBars, you need to import the Material Components package for Flutter:

You need to be using a MaterialApp.

For more information on getting started with the Material for Flutter, go to the Flutter Material library page.

Bottom navigation example

Source code API:

BottomNavigationBar

The following example shows a bottom navigation bar with four icons:

  • favorites
  • music note
  • places
  • news

Bottom navigation bar with favorites, music note, places, and news icons

Anatomy and key properties

The following is an anatomy diagram for the bottom navigation bar:

bottom nav anatomy diagram

  1. Container
  2. Inactive icon
  3. Inactive text label
  4. Active icon
  5. Active text label

Container attributes

 Property
ColorbackgroundColor
Elevationelevation

Inactive icon attributes

 Property
Iconicon
ColorunselectedItemColor
Sizesize on unselectedIconTheme

Inactive text label attributes

 Property
Text labeltitle
ColorunselectedItemColor
TypographyunselectedLabelStyle

Active icon attributes

 Property
Iconicon
ColorselectedItemColor
Sizesize on selectedIconTheme

Active text label attributes

 Property
Text labeltitle
ColorselectedItemColor
TypographyselectedLabelStyle

Theming a bottom nav bar

The following example shows a bottom navigation bar with the Material Shrine Theme.

Dartpad Demo

Bottom Navigation bar with Shrine theming

No Flutter implementation guidance available

Using bottom navigation

Installing

In order to install bottom navigation with Cocoapods first add it to your Podfile:

Then, run the following command:

From there, import the relevant target or file and instantiate your view.

Swift

Objective-C

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:

  1. To only show the title of the selected item.
  2. To always show title regardless of any item's selection state
  3. 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.

Swift

Objective-C

Minimum touch size

Make sure that your bottom navigation bar respects the minimum touch area. The Material spec calls for touch areas that should be least 48 points high and 48 wide.

Swift

Objective-C

Bottom navigation bar

A bottom navigation item with home, mail, favorites, reader, and birthday sections

Bottom navigation bar example

API and source code:

To achieve something like the example image above, add the following code to your view controller:

Swift

Objective-C

Anatomy and key properties

The following is an anatomy diagram for the bottom navigation bar:

Bottom navigation anatomy diagram

  1. Container
  2. Inactive icon
  3. Inactive text label
  4. Active icon
  5. Active text label

Container attributes

 AttributeRelated methodsDefault value
ColorbarTintColor-setBarTintColor:
-barTintColor
Surface color
Elevationelevation-setElevation:
-elevation
8
 AttributeRelated methodsDefault value
TitleN/A-[UITabBarItem initWithTitle:image:tag:]
-[UITabBarItem initWithTitle:image:selectedImage:]
N/A
Unselected colorunselectedItemTintColor-setUnselectedItemTintColor:
-unselectedItemTintColor
[UIColor grayColor]
Selected colorselectedItemTintColor-setSelectedItemTintColor:
-selectedItemTintColor
[UIColor blackColor]

Icon attributes

 AttributeRelated methodsDefault value
ImageN/A-[UITabBarItem initWithTitle:image:tag:]
-[UITabBarItem initWithTitle:image:selectedImage:]
N/A
Selected imageselectedImage-[UITabBarItem setSelectedImage:]
-[UITabBarItem selectedImage]
nil
Badge valuebadgeValue-[UITabBarItem setBadgeValue:]
-[UITabBarItem badgeValue]
nil
Badge colorbadgeColor-[UITabBarItem setBadgeColor:]
-[UITabBarItem badgeColor]
nil

Text label attributes

 AttributeRelated methodsDefault value
TypographyitemTitleFont-setItemTitleFont:
-itemTitleFont
Headline 6
ColorselectedItemTitleColor-setSelectedItemTitleColor
-selectedItemTitleColor
[UIColor blackColor]

Theming

A bottom navigation with Shrine theming

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:

Then run the installer:

Then, import the relevant file or target and call the appropriate theming method.

Swift

Objective-C

No iOS implementation guidance available

Up next