Tabs

Usage

When to use

• Use tabs when there is a large amount of content that can be separated.
• Use tabs to make the content accessible without reloading the page or compromising on space.
• Different tab-panes should be logically related but mutually exclusive. A content element should only be in one tab at a time.

Types

There are the following tab types:

Horizontal tabs

• Horizontal tabs are best used with ten or fewer tabs.
• Pay attention to the legibility of tab labels. Especially with a large number of tabs and little horizontal screen space.

Horizontal tabs with secondary tabs

• Secondary tabs only appear as nested tab.
• Secondary tabs never appear without a parent set of primary tabs.

Frameless horizontal tabs

• If the whole content of the main region belongs to the current tab, use frameless tabs.
• Frameless tabs have to be horizontal.
• Navigating between tabs affects all content in the tab pane.

Vertical tabs

• Tab elements can be arranged in a vertical column.
• Vertical tabs share all main characteristics of the horizontal tab.
• Vertical tabs provide better scalability for a large amount of tabs (ten and more).
• Vertical tabs can have an additional description to summarize the tab’s content.

Vertical tabs with secondary tabs

• The number of secondary tabs should be as small as possible – not more than six are recommended.

General construction

Tabs can either be arranged horizontally or vertically. The current tab defines what content is shown in the tab pane. Tabs can be nested in two levels.

Tabs consist of the following elements:

Horizontal tabs

Vertical tabs

1. Icon

• Icons are optional. The icon should appear to the left of the tab label.
• Tab icon and label should match each other semantically.
• The icon color and style should match the label font.

2. Text label

• The label should summarize the tab’s content.
• Try not to use more than two words for a tab label.
• Tab labels should be written in title case and all words should be proper nouns.

3. Current tab

• The current tab is always connected to the tab pane.

4. Default tab

• All default tab elements should be visually distinct from the tab pane.
• Try to use as few tabs as possible (less than ten).

5. Tab pane

• The tab pane houses the content of the current tab.

6. Secondary tabs

• Secondary tabs are optional.
• Secondary tabs can be complex for the user. If possible, consider alternatives.
• Secondary tabs never appear as standalone tabs outside the tab pane.

7. Description

• Vertical tabs can have a description to summarize the tab’s content.
• A description without text label is not possible.

8. Tab bar background pane

• The tab bar background pane houses all tabs.

Behavior

Placement

Frameless tabs are placed in the main region below the content header.

Do’s & Don’ts

• Use secondary tabs as a nested tab element.
• Do not use horizontal or vertical primary tabs as a nested tab element.