Updated: June 14, 2021

Navigation Bar

Intro

The Navigation Bar is an integral part of a screen that helps indicate where the user is in the app and contains the page-level control actions.

Structure

A: Left Accessory

Left Accessory typically contains Profile button, Back button, or Cancel button. In addition, it shows where the user comes from and offers an action for users to navigate back.

B: Title

The title contains content that describes the page. It can have primary and secondary content.

C: Right Accessory

Right Accessory typically contains page-level actions.

Navigation Bars
Navigation Bars

Variations

Navigation Bar Types

Default Contrast Navigation Bar

This navigation bar is used by default. All UI components on this bar utilize components with contrast variant colors.

Default Contrast Navigation Bar
Default Contrast Navigation Bar

Blended Navigation Bar

The blended navigation bar has a similar background color to the page background. Usually, this navigation bar type applies to screens in Onboarding patterns.

Blended Navigation Bar
Blended Navigation Bar

Light and Dark Modes

Example Screens in Light Mode
Example Screens in Light Mode
Example Screens in Dark Mode
Example Screens in Dark Mode

Behavior & Interaction

Scrolling

For the blended navigation bar, in the beginning, the bar and the content look connected. When the user starts scrolling, the bar shadow will appear to separate those two parts.