Adobe Logo

Spectrum

Version 2.0.0

Bottom navigation (Android)

Bottom navigation is a top-level navigation control for Android apps.

Image illustrating bottom navigation on an Android phone. Navigation items are arranged horizontally, with icons and labels Favorites, Recent, Files, Notifications. The first item, Favorites, is in active state.

Table of contents#

Anatomy#

Image illustrating through labels the component parts of a bottom navigation component including item, item label, and icon.

Options#

Key example of bottom navigation with 3 items, labels Home, Notifications, and Files.

Label#

Bottom navigation items should always have labels. In rare cases where context is sufficient and an accessibility expert has reviewed the design, labels could be undefined in order to make an icon-only bottom navigation.

Key example of bottom navigation label position options. Two options, bottom labels and side labels, 3 items in each option with generic "label" as the label text for all items.

Label position#

Bottom navigation items have an option for side labels when in landscape mode or on a tablet. This helps to utilize the available horizontal space more effectively. When using this option, items in the navigation are horizontally distributed.

Key example of bottom navigation with 3 items with icons. An icon of a house, label Home. An icon of a bell, label Notifications. An icon of a folder, label Files.

Icon#

Bottom navigation items should always have icons. Icons provide metaphors for quick visual reference and help to reinforce a product's navigation. Icons also help to supplement labels, for better comprehension.

Key examples of bottom navigation with primary background and secondary background colors. Bottom navigation with primary background color illustrated with labels gray-50 and gray-100. Secondary background color illustrated with labels gray-100 and gray-75.

Background#

Bottom navigation can be given a primary or secondary background color. Primary background is a lighter background color for bottom navigation on all themes. It should be used when an app’s default background is gray-100, gray-75, or gray-300 on light themes, or gray-75 or gray-50 on dark themes.

Secondary background is a slightly darker background color on all themes. It should be used when an app’s default background is gray-75, gray-50, or gray-300 on light themes, or gray-100 or gray-50 on dark themes.

Key examples of bottom navigation distribution options. Example of centered items with width equal to portrait mode. Example of horizontally distributed items filling entire device viewport width.

Item distribution#

When a device is in landscape mode, bottom navigation items can be distributed horizontally to fill the width of the screen. This distribution can only be used with the side label placement option.

Notification badges#

Bottom navigation items can be given notification badges for indicating status or important information. Be mindful of how frequently you notify users and what type of content should trigger a notification badge, to avoid causing users to ignore badges altogether.

Key example of bottom navigation with 1 disabled item with "cloud" icon and label "Share.”

Disabled#

A bottom navigation item in a disabled state shows that an item exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that the item may become available later. Don't disable a bottom navigation item unless absolutely necessary.

Table of options#

From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.

PropertyValuesDefault value
label
text
-
label position
bottom / side
bottom (mobile, portrait) / side (tablet, landscape)
icon
icon
-
background
primary / secondary
primary
has badge
yes / no
no
is disabled
yes / no
no

Usage guidelines#

Use for top-level navigation#

Bottom navigation is intended to be used as the highest, or top-level, navigation. Don't use bottom navigation for segmenting sub-content or sub-sections of your app.

Key example of correct usage of bottom navigation as top level navigation with items Home, Your work, and Settings.

Use consistent background for app framing#

App bars should use a background color that is consistent with the bottom navigation. This ensures that your app provides users with a clear visual hierarchy of the layers and structure of your product.

Key example illustrating correct usage of consistent backgrounds for app framing. Top app bar shown with bottom navigation of same background color.

Use concise labels#

Use concise labels for bottom navigation items. A tool like World Ready can help to ensure that the translations of labels are also reasonably short. Having concise labels ensures that the layout will be usable across a variety of device sizes, orientations, and locales.

Key example of correct usage of concise labels in bottom navigation. Items labeled Home, Recent documents, Settings.
Key example of incorrect usage of writing labels in bottom navigation. Items labeled Home, Most recently viewed documents, Settings. Most recently viewed documents is too long and is truncated with an ellipsis after the word "viewed."

Simplify navigation#

Avoid using too many bottom navigation items for your app. Having more items adds unnecessary complexity and compromises the touch hit area of each item. The recommended number of bottom navigation items is between 3 to 5.

Key example of incorrect bottom navigation layout. A bottom navigation that has too many items and is too complex. Bottom navigation with 7 items, Home, Your work, Synced, Profile, Archive, Help, Settings.

Don't use icon-only bottom navigation#

Icon meanings and navigation items vary by product. In order to make sure that your users fully understand your product’s navigation, it’s highly recommended to use labels with icons in bottom navigation. Do not use the “unlabeled” or “selected” options for bottom navigation label visibility mode.

Key example showing incorrect usage of bottom navigation. An icon-only bottom navigation. Three items, icon image of a house, icon image of a piece of paper, and icon image of a cloud. No text labels.

Additional resources#

Changelog#

DateNumberNotes
Apr 06, 20222.0.0
  • Updated all colors to 6.0.0
Jul 13, 20201.0.0
  • This component has been added to the website

Design checklist#

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

N/A

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Content design

UI language and information design considerations have been incorporated into component design.

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.