Tabs

Tabs may be used to navigate between multiple URLs. Tabs are intended for page-level navigation.

an example of tabs

Usage guidelines

When to use
  • To break up a large collection of information or pages into logical, digestible views.
  • To switch between different, yet related views, such as Updates and Messages.
When not to use
  • Any UI elements above the Tabs are altered upon selection. Use Link instead.
  • To break up chunks of information that aren't related to each other or aren't on the same hierarchical level.
  • To filter information. Consider SegmentedControl instead.

Best practices

  • Place Tabs directly above the relevant information.
  • Avoid using more than six Tabs. Consider using a different component like Sheet.
  • Order Tabs by relevance—the first tab should be the most logical starting view.
example with concise tab labels
Do

Keep Tab labels short and concise, one or two words.

example of only one tab
Don't

Hide or disable Tabs if that Tab is empty. Additionally, there should always be at least two tabs.

example of tabs scrolling horizontally
Do

Allow tabs to scroll horizontally.

example of tabs with truncated labels
Don't

Truncate tabs to fit within a view.

Accessibility

People use Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Apple’s Human Interface Guidelines and documentation about accessibility for iOS:

Accessible design on iOS


Accessible development on iOS
; Opens a new tab

Design tokens

Anatomy

Default tabs

Filled tabs

Variants

Alignment

Tabs can be aligned to either the start or end point depending on language direction or centered.

  1. Start or end aligned (Default)
    Use if you have more than three tabs. Start or end-aligned tabs will scroll horizontally if information is long enough to flow out of the frame.
  2. Center aligned
    This variant may be used if you have two or three tabs. Center-aligned Tabs shouldn't be used if labels are long or if you have more than three Tabs. The center-aligned style of Tabs is used primarily for navigational Tabs and sits in the header of the screen.
start aligned tabs

Start or end aligned (Default)

center aligned tabs

Center aligned

Style

Tabs can be aligned to either the start or end point depending on language direction or centered.

  1. Underline
    The underline style of Tabs sits primarily in the header of the screen.
  2. Filled (Default)
    This is the default tab style. Use the filled style for any Tabs that sit within a screen.

Default tabs

Filled tabs

Localization

Be sure to localize the tab text. Note that localization can lengthen text by 20 to 30%.


start aligned tabs