Updated: January 27, 2022

Navigation Bar

Intro

The navigation bar is an integral part of the screen that indicates the position of the user within the app and contains the page-level control actions.

Examples of a navigation bar on iPhone (left) and iPad (right)
Examples of a navigation bar on iPhone (left) and iPad (right)

Usage

Use a navigation bar to represent the navigation hierarchy of the current page to the user. The title text should be concise, and there should be limited number of actions on the bar.

Do
  • Keep the title and large title text short and concise
  • Use an overflow button or a pull-down button when there are too many page-level actions
  • Ensure consistency of the position of the Close, Cancel and Back buttons. Generally, they are on the left side of the navigation bar.
  • When the text of the Back button is too long. The text can be omitted.
Don't
  • Don’t show more than 2 symbol buttons on the right side in the compact width layout
  • Don’t provide multiple similar actions on the navigation bar. For example, if a Back button and a Save button do the same action, one button is enough.
  • Don’t truncate the text on label buttons on the navigation bar. Choose more concise words if possible. The user won’t be able to read the full label of the buttons.

Anatomy

A: Left Accessory

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

B: Large Title

The large title is the large version of the title and is hidden when the title is shown.

C: Title

The title is the heading of the entire page. It can have primary and secondary content. By default, the title content is the same as the large title. It is hidden when the large title is visible.

D: Right Accessory

The right accessory typically contains page-level actions.

E: Search Bar

The search bar inside the navigation can be persistent. Generally, it is used as a global search.

Navigation bars
Navigation bars

Behavior and Interaction

Visibility of Title and Large Title

When using a large title, the title is hidden by default. The title appears when the large title is scrolled out of the screen.

Example where the large title is hidden underneath the navigation bar and the title text appears
Example where the large title is hidden underneath the navigation bar and the title text appears

Scrolling

A navigation bar starts out without a shadow. When the user scrolls down, and some content moves underneath the bar, a shadow will appear to separate the content underneath from the bar.

If a large title is used, a shadow shows below the large title view once the title disappeared underneath the navigation bar completely.

Scrolling behavior of a navigation bar when a large title is used (left) and when it is not used (right)
Scrolling behavior of a navigation bar when a large title is used (left) and when it is not used (right)

Adaptive Design

The navigation bar spacing follows the global layout margins of the iOS size classes. The number of buttons on the navigation bar in iPhone and iPad can be different, depending on an app design decision. In addition, some buttons on a toolbar on an iPhone version can be moved to the navigation bar on an iPad version, and some buttons on the navigation bar can be moved to a sidebar.

Example where some UI elements moved from the navigation bar to the sidebar on iPad
Example where some UI elements moved from the navigation bar to the sidebar on iPad

Variations

Large Title

The use of a large title is optional. The large title emphasizes on the page content and its purpose.

Screens with a large title (left) and without a large title (right)
Screens with a large title (left) and without a large title (right)

Navigation Bar Shadow

Flat Navigation Bar

The flat navigation bar doesn’t have a shadow. A shadow will appear however once the user starts scrolling.

Example where the navigation bar blends with the content area
Example where the navigation bar blends with the content area

Floating Navigation Bar

The floating navigation bar has a bar shadow that separates the content area from the bar.

Example where the navigation bar is visually separated from the content area
Example where the navigation bar is visually separated from the content area

Screen without a Navigation Bar

Some screens may not need a navigation bar because page information and the page-level actions are provided in the content area

Screen without a navigation bar
Screen without a navigation bar

Resources

Development: FUINavigationBar