A navigation bar appears at the top of an app screen, below the status bar, and enables navigation through a series of hierarchical screens. When a new screen is displayed, a back button, often labeled with the title of the previous screen, appears on the left side of the bar. Sometimes, the right side of a navigation bar contains a control, like an Edit or a Done button, for managing the content within the active view. In a split view, a navigation bar may appear in a single pane of the split view. Navigation bars are translucent, may have a background tint, and can be configured to hide when the keyboard is onscreen, a gesture occurs, or a view resizes.
Consider temporarily hiding the navigation bar when displaying full-screen content. The navigation bar can be distracting when you want to focus on content. Temporarily hide the bar to provide a more immersive experience. Photos hides the navigation bar and other interface elements when viewing full-screen photos. If you implement this type of behavior, let people restore the navigation bar with a simple gesture, like a tap.
For developer guidance, see UINavigationBar.
TIP Use a toolbar when navigation isn’t needed or you want multiple controls for managing content. See Toolbars.
Navigation Bar Titles
Consider showing the title of the current view in the navigation bar. In most cases, a title helps people understand what they’re looking at. However, if titling a navigation bar seems redundant, you can leave the title empty. For example, Notes doesn’t title the current note because the first line of content supplies all the context needed.
Use a large title when you want to provide extra emphasis on context. Large titles should never compete with content, but in some apps, the big, bold text of a large title can help orient people as they browse and search. In a tabbed layout, for example, large titles can help clarify the active tab and indicate when people have scrolled to the top. Phone uses this approach, while Music uses large titles to differentiate content areas like albums, artists, playlists, and radio. In iOS 13 and later, a large title navigation bar doesn’t include a background material or shadow by default. Also, a large title transitions to a standard title as people begin scrolling the content. For developer guidance, see prefersLargeTitles.
Consider hiding the border of a large-title navigation bar. In iOS 13 and later, you can hide the bottom border of a navigation bar by removing the bar’s shadow (the border automatically reappears when people scroll the content area). The borderless style works well in large-title navigation bars because it enhances the sense of connection between title and content. The borderless style may not work as well in standard-title navigation bars, though, because the bar’s title and buttons might be harder to distinguish. An exception to this is in a split view on iPad: You might want to maintain consistency between the master and detail views by using the borderless style in both.
Navigation Bar Controls
Avoid crowding a navigation bar with too many controls. In general, a navigation bar should contain no more than the view’s current title, a back button, and one control that manages the view’s contents. If you use a segmented control in the navigation bar, the bar shouldn’t include a title or any controls other than the segmented control.
Use the standard back button. People know that the standard back button lets them retrace steps through a hierarchy of information. However, if you implement a custom back button, make sure it still looks like a back button, behaves intuitively, matches the rest of your interface, and is consistently implemented throughout your app. If you replace the system-provided back button chevron with a custom image, supply a custom mask image too. iOS uses this mask to animate the button title during transitions.
Don’t include multisegment breadcrumb paths. The back button always performs a single action—returning to the previous screen. If you think people might get lost without the full path to the current screen, consider flattening your app’s hierarchy.
Give text-titled buttons enough room. If your navigation bar includes multiple text buttons, the text of those buttons may appear to run together, making the buttons indistinguishable. Add separation by inserting a fixed space item between the buttons. For developer guidance, see the UIBarButtonSystemItemFixedSpace constant value in UIBarButtonItem.
Consider using a segmented control in a navigation bar to flatten your app's information hierarchy. If you use a segmented control in a navigation bar, do so only at the top level of your hierarchy and be sure to choose accurate back-button titles at lower levels. For additional guidance, see Segmented Controls.