Navigation Bars
A navigation bar appears at the top of an app screen, below the status bar, and enables navigation through a series of hierarchical app 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, such as an Edit or a Done button, for managing 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 appropriate, such as when the keyboard is onscreen, a gesture occurs, or a view resizes.
Tip Use a toolbar when navigation isn’t needed or you want multiple controls for managing content. See Toolbars.
Consider showing the title of the current view in the navigation bar. In most cases, a title provides context by letting people know 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.
Consider putting a segmented control in a navigation bar at the top level of an app. This is especially useful if doing so helps to flatten your information hierarchy, making it easier for people to find what they’re looking for. If you use a segmented control in a navigation bar, be sure to choose accurate back-button titles. For additional guidance, see Segmented 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.
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 implementation details, see the UIBarButtonSystemItemFixedSpace constant value in UIBarButtonItem.
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. The Maps app hides the navigation bar and other interface elements when viewing a full-screen map. If you implement this type of behavior, let users restore the navigation bar with a simple gesture, such as a tap.
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.
For implementation details, see UINavigationBar.