A tab bar shows people where they are in your app and helps them navigate elsewhere or perform an action, such as search. When the Library tab is open, the tab bar stays pinned near the top of the screen. For all other tabs, the tab bar scrolls with the content and can be scrolled offscreen.
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 once.
In a live-viewing app, organize tabs in a consistent way. For the best experience, live-streaming apps should use tabs to organize content in the following order:
- Live content
- Cloud DVR or other recorded content
- Other content
For additional guidance, see Live-Viewing Apps.
Avoid having too many tabs. Each additional tab increases the complexity of your app, making it harder for people to locate information. Aim for a few tabs with short titles or glyphs to avoid crowding and causing tabs to truncate. For more guidance, see Tab Bar Items.
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, the Music tab in iTunes shows a screen explaining how to download songs if there are no songs to list.
Tab Bar Customization
A tab bar is highly customizable. For example, you can:
- Specify a tint, color, or image for the tab bar background
- Choose a font for tab items, including a different font for the selected item
- Specify tints for selected and unselected items
- Add button glyphs, such as settings and search (to learn about glyphs the system provides, see SF Symbols)
By default, a tab bar is translucent, and only the selected tab is opaque. When the tab bar is focused, the selected tab includes a drop shadow that emphasizes its selected state. The height of a tab bar is 68 points and its top edge is 46 points from the top of the screen; neither of these values can be changed.
Create a branded logo image to display next to the leading or trailing end of the tab bar, if it makes sense in your app. To ensure that there's enough room between the branded logo image and the edge of the tab bar, place the image within the safe margin. Use the following image size values for guidance:
|Maximum width||Maximum height|
|200 pt||68 pt|
For developer guidance, see UITabBarController.
Tab Bar Items
If there are more items than can fit in the tab bar, the system truncates the rightmost item by applying a fade effect that begins at the right side of the tab bar. If there are enough items to cause scrolling, the system also applies a truncating fade effect that starts from the left side.
Prefer short, text-based tab titles. Short titles help you avoid crowding and truncation. You can also avoid crowding by using glyphs with short titles, but this works only for universally recognized symbols like search or settings. Using an unfamiliar symbol without a descriptive title can confuse people. For guidance, see SF Symbols.
Don't use glyphs to let you pack more items into the tab bar. Even though glyphs generally take less space than text, you don't want to overwhelm people with too many choices in the tab bar.
Use concrete nouns or verbs as tab titles. A good tab title helps people navigate by clearly describing the type of content people will find when they select the tab. In general, titles should be nouns (such as Music, Movies, TV Shows, and Sports), but in some cases, verbs or short verb phrases may be more appropriate (such as Watch Now or For You).