Tabs are used to navigate between different content views on the same page.

‍

Types

1. Horizontal

For primary tabs on a page. Used to change all content on the page below the tabs.

2. Vertical

For secondary tabs on a page, or where horizontal tabs are infeasible due to page layout.

‍

Tab Content

Tabs allow for added depth and specificity to page content. When tabs reflect varied content, the leftmost tab should often be used as an “Overview” tab that contains snippets from, and links to the other tabs.

Labels

All tabs have a text label which should be kept as concise as possible. To add a more detailed label, a tooltip can be added that will appear on hover over the tab. Labels should briefly accurately describe the page content within that tab.

Alternatives

For a view controller that only impacts a particular section of a page, consider using a UISegmentedController.

‍

1. Tab Label

Tabs have a text label. Text is centered within the tab.

2. Tab Number

All tabs can have an optional number appended to the label. Tab numbers appear in a lighter text color than the label. Numbers should be applied to a tab label when the content is both quantifiable and meaningful to the user.

3. Selection Highlight

In addition to changing the label text style, a selected tab also displays a selection highlight along the tab bar beneath/beside the selected tab.

4. Tab Bar

For horizontal tabs, the tab bar runs beneath the tab labels for the full width of the tabbed section.

For vertical tabs, the tab bar runs along the left edge of the tab labels, but not beyond the lowermost label.

5. Tooltips

Tabs can trigger a tooltip. By default, this happens when tabs truncate, but this tooltip can be overridden with custom content to serve as an extra label or description of the tab. Additionally, they are often used to explain why a tab is disabled.

‍

Tabs are directly interactive elements that show the user what view is currently presented, and reflect this state using label and highlight styling.

Selection

One tab must be selected at all times. Clicking anywhere on an unselected tab will change the view to the clicked tab. Clicking on an already selected tab has no impact.

Default View

When navigating to a page, the leftmost tab (for horizontal) or topmost tab (for vertical) is selected by default.

Width & Alignment

Horizontal tabs have a maximum width of 175px, but may scale downward depending on browser width. When all tabs can be viewed simultaneously at max width, they are left-aligned along the tab bar. When that is not possible, all tabs widths are scaled down equally to fit.

Vertical tabs have a fixed height for each tab, and their height does not scale based on browser resizing.

Truncation

When a tab becomes too narrow to display the full label text, the label is truncated with an ellipsis (“…”). When truncated, the full tab label is displayed in a tooltip. Custom tooltip content overrides the display of truncation tooltips.

Tooltips

Tooltips are displayed on hover over a tab, when applicable.

Tab Order & Number

The number and order of tabs is determined during implementation. Tabs are not extensible or rearrangeable by users.

‍