Tab bars

ComponentsLayout

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/tab-bars. This file is a structured index of that content, snapshot 2025-02-02. Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

Tab bars

Best practices

Use a tab bar to support navigation, not to provide actions.

Make sure the tab bar is visible when people navigate to different sections of your app.

Use the appropriate number of tabs required to help people navigate your app.

Avoid overflow tabs.

Don’t disable or hide tab bar buttons, even when their content is unavailable.

Include tab labels to help with navigation.

Consider using SF Symbols to provide familiar, scalable tab bar icons.

Use a badge to indicate that critical information is available.

Avoid applying a similar color to tab labels and content layer backgrounds.

Platform considerations

iOS

iPadOS

  • Tab bar
  • Sidebar

Prefer a tab bar for navigation.

Let people customize the tab bar.

tvOS

  • 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 icons, like settings and search

Be aware of tab bar scrolling behaviors.

In a live-viewing app, organize tabs in a consistent way.

  • Live content

  • Cloud DVR or other recorded content

  • Other content

visionOS

Supply a symbol and a text label for each tab.

If it makes sense in your app, consider using a sidebar within a tab.

Resources

Developer documentation

Videos

Change log


For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/tab-bars

Get HIG guidance in your AI

Install Apple HIG Skills and get expert design guidance directly in Claude Code.

npx skills add raintree-technology/apple-hig-skills
Email updates aren't configured on this deployment yet. Follow the GitHub repo (opens in new tab) for updates.