Navigation bar Preview
The navigation bar provides information and actions relating to the current screen.
It often shows the app or page title and allows for navigation relative to the current page, letting someone step forward and back through a flow. The left side of the navigation bar can contain actions that directly relate to that page’s content, like edit or done buttons. If you need to show wayfinding for main sections of your app that don’t change as people move through it, try the tab bar.
Resources
Layout
Intuitive hierarchies
For experiences with complicated navigation, include a segmented control in the nav bar to flatten the hierarchy and make moving around simpler.
Simplify complicated hierarchies with a segmented control
Accessibility
Navigation bars support gradient backgrounds. Make sure that there’s sufficient contrast of white text on the lightest part of the background.
Content
Including the page title in the navigation bar can add useful context but can sometimes be redundant. Leave that space empty or opt for a different title if the page title doesn’t add sufficient context.
For example, in Calendar view on Outlook mobile, it’s doesn’t help to title the page “Calendar,” but including the current month as the page title at smaller screens helps people contextualize the information they’re looking at.
Titles should be brief, one or two words at most.
It’s helpful to include button labels to make available actions clear. When including button labels, make sure they have enough room on the navigation bar.
