Tab Bars

A tab bar appears at the top of an app screen, enabling users to quickly switch between different sections of an app. A tab bar may contain any number of tabs, but the number of visible tabs varies based on the display size. If some tabs can’t be displayed due to limited horizontal space, the final visible tab becomes a More tab, which lists additional tabs on a separate screen.

Screenshot of the Phone app in CarPlay with a list of Favorites displayed.

In general, use a tab bar to flatten your information hierarchy. A tab bar provides access to several peer information categories or modes at once.

Don’t remove or disable a tab when its function is unavailable. If tabs are available in some cases but not in others, your app’s interface appears unstable and unpredictable. Ensure that all tabs are always enabled. Explain why a tab’s content is unavailable in the body of the tab.

Use a tab bar strictly for navigation. Tab bar buttons should not be used to perform actions.

In general, use between three and five tabs. Each additional tab reduces the tappable area for selecting a tab and increases the complexity of your app, making it harder to locate information. Although a More tab can display extra tabs, this requires additional taps and is a poor use of space. Include essential tabs only, and use the minimum tabs necessary for your information hierarchy. Too few tabs can be a problem too, as it can make your interface appear disconnected.

Use badging to communicate unobtrusively. You can display a badge—a red oval containing white text and either a number or an exclamation point—on a tab to indicate that new information is associated with that view or mode. For related design guidance, see Badging.

For developer guidance, see UITabBar.