Bottom navigation

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

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.

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:

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.

Text labels

Text labels provide short, meaningful descriptions of bottom navigation destinations.

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.

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.

Scrolling

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.

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.

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.

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

This educational app’s bottom navigation bar has been customized using Material Theming. Areas of customization include color and typography.

Bottom navigation in the Owl app has 3 destinations — 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.

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:

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:

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.

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

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:

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.

Bottom navigation bar

API and source code:

BottomNavigationView
- Class description
- Class source

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:

xxxxxxxxxx

In bottom_navigation_menu.xml inside a menu resource directory:

xxxxxxxxxx

In code:

xxxxxxxxxx

Anatomy and key properties

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

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

Container attributes

Element	Attribute	Related methods	Default value
Color	app:backgroundTint	N/A	?attr/colorSurface
Elevation	app:elevation	setElevation	8dp

Element	Attribute	Related methods	Default value
Menu resource	app:menu	inflateMenu getMenu	N/A
Ripple (inactive)	app:itemRippleColor	setItemRippleColor getItemRippleColor	?attr/colorOnSurface at 8% (see all states)
Ripple (active)	"	"	?attr/colorPrimary at 8% (see all states)
Label visibility mode	app:labelVisibilityMode	setLabelVisibilityMode getLabelVisibilityMode	LABEL_VISIBILITY_AUTO

Icon attributes

Element	Attribute	Related methods	Default value
Icon	android:icon in the menu resource	N/A	N/A
Size	app:itemIconSize	setItemIconSize setItemIconSizeRes getItemIconSize	24dp
Color (inactive)	app:itemIconTint	setItemIconTintList getItemIconTintList	?attr/colorOnSurface at 60%
Color (active)	"	"	?attr/colorPrimary

Text label attributes

Element	Attribute	Related methods	Default value
Text label	android:title in the menu resource	N/A	N/A
Color (inactive)	app:itemTextColor	setItemTextColor getItemTextColor	?attr/colorOnSurface at 60%
Color (active)	"	"	?attr/colorPrimary
Typography (inactive)	app:itemTextAppearanceInactive	setItemTextAppearanceInactive getItemTextAppearanceInactive	?attr/textAppearanceCaption
Typography (active)	app:itemTextAppearanceActive	setItemTextAppearanceActive getItemTextAppearanceActive	?attr/textAppearanceCaption

Styles

Element	Style	Container color	Icon/Text label color (inactive)	Icon/Text label color (active)
Default style	Widget.MaterialComponents.BottomNavigationView	?attr/colorSurface	?attr/colorOnSurface at 60%	?attr/colorPrimary
Colored style	Widget.MaterialComponents.BottomNavigationView.Colored	?attr/colorPrimary	?attr/colorOnPrimary at 60%	?attr/colorOnPrimary
Dark theme supported style	Widget.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.

API and source code:

BottomNavigationView
- Class description
- Class source

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

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

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

xxxxxxxxxx

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

xxxxxxxxxx

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

xxxxxxxxxx

No Android implementation guidance available

No Web implementation guidance available

Bottom navigation example

Source code API:

BottomNavigationBar

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

favorites
music note
places
news

xxxxxxxxxx
BottomNavigationBar(  type: BottomNavigationBarType.fixed,  backgroundColor: Color(0xFF6200EE),  selectedItemColor: Colors.white,  unselectedItemColor: Colors.white.withOpacity(.60),  selectedFontSize: 14,  unselectedFontSize: 14,  onTap: (value) {    // Respond to item press.  },  items: [    BottomNavigationBarItem(      title: Text('Favorites'),      icon: Icon(Icons.favorite),    ),    BottomNavigationBarItem(      title: Text('Music'),      icon: Icon(Icons.music_note),    ),    BottomNavigationBarItem(      title: Text('Places'),      icon: Icon(Icons.location_on),    ),    BottomNavigationBarItem(      title: Text('News'),      icon: Icon(Icons.library_books),    ),  ],)

Anatomy and key properties

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

Container
Inactive icon
Inactive text label
Active icon
Active text label

Container attributes

	Property
Color	backgroundColor
Elevation	elevation

Inactive icon attributes

	Property
Icon	icon
Color	unselectedItemColor
Size	size on unselectedIconTheme

Inactive text label attributes

	Property
Text label	title
Color	unselectedItemColor
Typography	unselectedLabelStyle

Active icon attributes

	Property
Icon	icon
Color	selectedItemColor
Size	size on selectedIconTheme

Active text label attributes

	Property
Text label	title
Color	selectedItemColor
Typography	selectedLabelStyle

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

​x
import 'package:flutter/material.dart';​void main() => runApp(MyApp());​class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      theme: _buildShrineTheme(),      title: 'Flutter Demo',      home: MyHomePage(),    );  }}​class MyHomePage extends StatefulWidget {  @override  _MyHomePageState createState() => _MyHomePageState();}​class _MyHomePageState extends State<MyHomePage> {  int _currentIndex = 0;​  Widget build(BuildContext context) {    final colorScheme = Theme.of(context).colorScheme;    final textTheme = Theme.of(context).textTheme;    return Scaffold(      bottomNavigationBar: BottomNavigationBar(        type: BottomNavigationBarType.fixed,        currentIndex: _currentIndex,        backgroundColor: colorScheme.surface,        selectedItemColor: colorScheme.onSurface,        unselectedItemColor: colorScheme.onSurface.withOpacity(.60),        selectedLabelStyle: textTheme.caption,        unselectedLabelStyle: textTheme.caption,        onTap: (value) {          // Respond to item press.          setState(() => _currentIndex = value);        },        items: [          BottomNavigationBarItem(            title: Text('Favorites'),            icon: Icon(Icons.favorite),          ),          BottomNavigationBarItem(            title: Text('Music'),            icon: Icon(Icons.music_note),          ),          BottomNavigationBarItem(            title: Text('Places'),            icon: Icon(Icons.location_on),          ),          BottomNavigationBarItem(            title: Text('News'),            icon: Icon(Icons.library_books),          ),        ],      ),    );  }}​ThemeData _buildShrineTheme() {  final ThemeData base = ThemeData.light();  return base.copyWith(    colorScheme: _shrineColorScheme,    textTheme: _buildShrineTextTheme(base.textTheme),  );}​TextTheme _buildShrineTextTheme(TextTheme base) {  return base      .copyWith(        caption: base.caption.copyWith(          fontWeight: FontWeight.w400,          fontSize: 14,          letterSpacing: defaultLetterSpacing,        ),        button: base.button.copyWith(          fontWeight: FontWeight.w500,          fontSize: 14,          letterSpacing: defaultLetterSpacing,        ),      )      .apply(        fontFamily: 'Rubik',        displayColor: shrineBrown900,        bodyColor: shrineBrown900,      );}​const ColorScheme _shrineColorScheme = ColorScheme(  primary: shrinePink100,  primaryVariant: shrineBrown900,  secondary: shrinePink50,  secondaryVariant: shrineBrown900,  surface: shrineSurfaceWhite,  background: shrineBackgroundWhite,  error: shrineErrorRed,  onPrimary: shrineBrown900,  onSecondary: shrineBrown900,  onSurface: shrineBrown900,  onBackground: shrineBrown900,  onError: shrineSurfaceWhite,  brightness: Brightness.light,);​const Color shrinePink50 = Color(0xFFFEEAE6);const Color shrinePink100 = Color(0xFFFEDBD0);const Color shrinePink300 = Color(0xFFFBB8AC);const Color shrinePink400 = Color(0xFFEAA4A4);​const Color shrineBrown900 = Color(0xFF442B2D);const Color shrineBrown600 = Color(0xFF7D4F52);​const Color shrineErrorRed = Color(0xFFC5032B);​const Color shrineSurfaceWhite = Color(0xFFFFFBFA);const Color shrineBackgroundWhite = Colors.white;​const defaultLetterSpacing = 0.03;

No Flutter implementation guidance available

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

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.

Swift

xxxxxxxxxx

Objective-C

xxxxxxxxxx

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

xxxxxxxxxx

Objective-C

xxxxxxxxxx

Bottom navigation bar

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

API and source code:

MDCBottomNavigationBar
- Class source

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

Swift

xxxxxxxxxx

Objective-C

Anatomy and key properties

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

Container
Inactive icon
Inactive text label
Active icon
Active text label

Container attributes

	Attribute	Related methods	Default value
Color	barTintColor	-setBarTintColor: -barTintColor	Surface color
Elevation	elevation	-setElevation: -elevation	8

	Attribute	Related methods	Default value
Title	N/A	-[UITabBarItem initWithTitle:image:tag:] -[UITabBarItem initWithTitle:image:selectedImage:]	N/A
Unselected color	unselectedItemTintColor	-setUnselectedItemTintColor: -unselectedItemTintColor	[UIColor grayColor]
Selected color	selectedItemTintColor	-setSelectedItemTintColor: -selectedItemTintColor	[UIColor blackColor]

Icon attributes

	Attribute	Related methods	Default value
Image	N/A	-[UITabBarItem initWithTitle:image:tag:] -[UITabBarItem initWithTitle:image:selectedImage:]	N/A
Selected image	selectedImage	-[UITabBarItem setSelectedImage:] -[UITabBarItem selectedImage]	nil
Badge value	badgeValue	-[UITabBarItem setBadgeValue:] -[UITabBarItem badgeValue]	nil
Badge color	badgeColor	-[UITabBarItem setBadgeColor:] -[UITabBarItem badgeColor]	nil

Text label attributes

	Attribute	Related methods	Default value
Typography	itemTitleFont	-setItemTitleFont: -itemTitleFont	Headline 6
Color	selectedItemTitleColor	-setSelectedItemTitleColor -selectedItemTitleColor	[UIColor blackColor]

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:

xxxxxxxxxx

Then run the installer:

xxxxxxxxxx

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

Swift

xxxxxxxxxx

Objective-C

No iOS implementation guidance available

Bottom navigation

Usage

Principles

Ergonomic

Consistent

Related

When to use

Bottom navigation should be used for:

Bottom navigation shouldn’t be used for:

Anatomy

Representing destinations

Icons

Text labels

Icon & label colors

Behavior

Navigation

Badges

Scrolling

Transitions

Scaling and adaptation

Placement

Elevation

Fixed navigation bar

Landscape view

States

Research

Theming

Owl Material Theme

Color

Typography

Specs

Mobile

Portrait

Minimum width

Maximum width

Landscape

Using bottom navigation

Making bottom navigation accessible

Adding badges

Bottom navigation bar

Bottom navigation bar example

Anatomy and key properties

Container attributes

Navigation item attributes

Icon attributes

Text label attributes

Styles

Theming a bottom navigation bar

Bottom navigation theming example

Implementing bottom navigation theming

Using bottom navigation

Bottom navigation example

Anatomy and key properties

Container attributes

Inactive icon attributes

Inactive text label attributes

Active icon attributes

Active text label attributes

Theming a bottom nav bar

Using bottom navigation

Installing

Swift

Objective-C

Bottom navigation classes

Making bottom navigation accessible

Swift

Objective-C

Minimum touch size

Swift

Objective-C

Bottom navigation bar

Bottom navigation bar example

Swift

Objective-C

Anatomy and key properties

Container attributes

Navigation item attributes

Icon attributes

Text label attributes

Theming