Tab Bars

A tab bar appears at the bottom of an app screen and lets people quickly switch among different sections of an app. Tab bars are translucent, may have a background tint, maintain the same height in all screen orientations, and are hidden when a keyboard is displayed. A tab bar may contain any number of tabs, but the number of visible tabs varies based on the device size and orientation. If some tabs can’t be displayed due to limited horizontal space, the final visible tab becomes a More tab, which reveals the additional tabs in a list on a separate screen.

Partial screenshot of the Albums tab selected in the Photos app.

TIP It’s important to understand the difference between a tab bar and a toolbar, because both types of bars appear at the bottom of an app screen. A tab bar lets people switch among different sections of an app, such as the Alarm, Stopwatch, and Timer tabs in the Clock app. A toolbar contains buttons for performing actions related to the current context, like creating an item, deleting an item, adding an annotation, or taking a photo. For guidance, see Toolbars. Tab bars and toolbars never appear together in the same view.

For developer guidance, see UITabBar.

In general, use a tab bar to organize information at the app level. A tab bar is a good way to flatten your information hierarchy and provide access to several peer information categories or modes at the same time.

Use a tab bar strictly for navigation. Don’t use tab bar buttons to enable actions. If you need to provide controls that act on elements in the current view, use a toolbar instead.

Aim for the right number of tabs. Too many tabs reduces the tappable area of each tab and increases the complexity of your app, which can make it harder for people to locate information. Too few tabs can be a problem too, as it can make your interface appear disconnected. Although a More tab can display extra tabs, it requires an additional tap to reveal them and can be a poor use of space. Include essential tabs only, and use the minimum number of tabs necessary for your information hierarchy. In general, use between three and five tabs on iPhone; if needed, a few more are acceptable on iPad.

Don’t hide a tab bar when people navigate to different areas in your app. A tab bar enables global navigation for your app, so it should remain visible everywhere. The exception to this is in modal views. Because a modal view gives people a separate experience that they dismiss when they’re finished, it’s not part of the overall navigation of your app.

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 becomes unstable and unpredictable. Ensure that all tabs are always enabled, and explain why a tab’s content is unavailable. For example, if there are no songs on an iOS device, the Listen Now tab in the Music app explains how to download songs.

Always switch contexts in the attached view. To keep your interface predictable, selecting a tab should always affect the view that’s directly attached to the tab bar, not another view elsewhere on screen. For example, selecting a tab on the left side of a split view shouldn’t cause the right side of the split view to suddenly change. Selecting a tab in a popover shouldn’t cause the view behind the popup to change.

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.

Make sure tab bar glyphs are visually consistent and balanced. In iOS 13 and later, you can use SF Symbols to represent tab bar items. In all versions of iOS, system APIs give you a set of specific glyphs designed for common use cases (see System Icons > Tab Bar Icons). You can also design your own glyphs; for guidance, see Glyphs.

In portrait orientation, tab bar glyphs can appear above tab titles; in landscape orientation, the glyphs and titles can appear side-by-side. Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar glyphs for both sizes. Use the following metrics when creating tab bar glyphs in different shapes.

Target width and height (circular glyphs)

Image of a solid blue circle, which represents the target, centered inside the outlines of two squares. All three shapes are contained within the outline of a rectangle. The width of the inner square is slightly smaller than the diameter of the circle. The width of the outer square is the same as the diameter of the circle. The width of the rectangle is slightly larger than its height. A vertical line, extending to the top and bottom edges of the outer square, indicates the target’s height. A horizontal line, extending to left and right edges of the outer square, represents the target’s width.

Regular tab bars Compact tab bars
25x25 pt (75x75 px @3x) 18x18 pt (54x54 px @3x)
25x25 pt (50x50px @2x) 18x18 pt (36x36 px @2x)

Target width and height (square glyphs)

Image of a solid blue square, which represents the target, centered inside the outline of a slightly larger square. Both shapes are contained within the outline of a rectangle. The solid blue square is slightly smaller than the outlined square. The width of the rectangle is slightly larger than its height. A vertical line, extending to the top and bottom edges of the blue square, represents the square's height. A horizontal line, extending to left and right edges of the blue square, indicates the target's width.

Regular tab bars Compact tab bars
23x23 pt (69x69 px @3x) 17x17 pt (51x51 px @3x)
23x23 pt (46x46 px @2x) 17x17 pt (34x34 px @2x)

Target width (wide glyphs)

Image of a solid blue rectangle, which represents the target, vertically centered inside the outline of a larger rectangle. The height of the blue rectangle is approximately half the height of the outlined rectangle. The outlines of two squares are horizontally centered within the outlined rectangle. The width of the outlined rectangle is slightly larger than its height. A horizontal line, extending to left and right edges of the outlined rectangle, represents the target's width.

Regular tab bars Compact tab bars
31pt (93px @3x) 23pt (69px @3x)
31pt (62px @2x) 23pt (46px @2x)

Target height (tall glyphs)

Image of a solid blue rectangle, which represents the target, horizontally centered inside the outline of a larger rectangle. The width of the blue rectangle is approximately half the width of the outlined rectangle. The outlines of two squares are horizontally centered within the outlined rectangle. The width of the outlined rectangle is slightly larger than its height. A vertical line, extending to top and bottom edges of the outlined rectangle, represents the target's height.

Regular tab bars Compact tab bars
28pt (84px @3x) 20pt (60px @3x)
28pt (56px @2x) 20pt (40px @2x)