Navigation - Bottom

The Navigation Bar (Android) or Tab Bar (iOS) is a native OS component used to switch quickly between primary destinations of the app.

This element is only shown on the parent view of each primary destination. It disappears once the user navigates to a deeper level or nested view within a section.

The styling is dependent on what the respective OS allows, but they share the following similarities:

each item consists of an icon and a label
an item can have a notification dot or pill to show to the user that there are new items waiting for them in this section of the app

OS Controls

On screens where no Navigation Bar / Tab Bar is used, only the device controls are visible.

Android

New Android devices usually use a thin bar as default option to dismiss the active app or to switch between apps.

Older Android devices used to have a bar with 3 icons.

iOS

New iOS devices have a thin bar to dismiss the active app or to switch between apps. This so called “Home Indicator” automatically changes it’s appearance based on the underlying color.

Older iOS devices don’t feature an on-screen device navigation (they have a physical Home Button instead)