Bottom Navigation

The bottom navigation allows users to quickly navigate from one section of the app to another.

Dos and Don'ts

Use minimum 3 and maximum 5 tabs for navigation across the app.
Make the navigation bar always visible. The exception is when an overlay is opened.
Use a clear visual hierarchy to indicate the currently active destination.

Don't

Don't change the tabs for a specific user flow. The navigation bar should be consistent across app screens.
Avoid using complex icons. Ensure the icons are simple and universally understood to minimise confusion.
Avoid long or complex wording; keep labels concise and direct.

Anatomy

A docked bottom navigation bar anchored at the bottom of a mobile screen.

Container: Provides a filled background.
Icon (selected): The icon is always filled and is visually distinguished from the inactive ones.
Label: Describes the purpose and function of the tab to provide clarity, especially for less common or ambiguous icons.
Home indicator: Navigation bar for accessing core system functions on iOS.
Icon (unselected): Visually supports the label and doesn't have a fill.
Notification badge: Displays notifications, or counts on navigation items.

Variants

The bottom navigation bar on iOS 26 (and later) dynamically shifts between Bright and Dim when used above specific content to increase legibility.

Bright

When used above bright or light content and images.

Dim

When used above dim or darker content and images.

A bottom navigation bar with four tabs in the dim variant.

Content

Label

Labels should always be one word with clear meaning to aid navigation through the app. Avoid long or complex wording; keep labels concise and direct.

Notification badge

Badges appear on top of the icon. They show the number of notifications in a specific tab. The badge will change size depending on the number of digits contained without changing position.

Position

There are no editable properties in iOS native badges.

Character count

Allow for a maximum of 2 digits.
A plus (+) sign should be used if the number is higher than 2 digits.

Each context and case might require different logic on when to remove the notification badge or the number of digits allowed to display.

A bottom navigation bar showing notification badges with the maximum character count of two digits and a plus sign.

Icon

Always use solid icons to ensure the best possible legibility when used with Liquid Glass.

Overflow

Labels should not go over one line of text. If they do the text will truncate. Avoid this happening by keeping text label succinct and testing any translations across devices. Use alternative titles if translations are too long.