Tabs
Tabs are used to separate information into logical sections and to quickly navigate between them.
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.
Style
This chapter shows several tabs styles in the design system.
Overview
Horizontal tabs
Frameless tabs
Vertical tabs
Item states
- The default state indicates an available, but not selected tab.
- The mouseover state shows a hover state of a tab.
- The focus state is only visible when a tab is selected by keyboard.
- The current state indicates the currently selected tab.
- The disabled state shows a tab that can’t be selected.
Typography
The following table gives reference to the different font sizes and weights:
Name | State | Font-family | Font-size | Line-height | Text-align |
---|---|---|---|---|---|
Horizontal tab label | all | Siemens Sans Bold | 14px | 20px | left, center |
Vertical tab label | all | Siemens Sans Bold | 14px | 24px | left |
Vertical tab description | all | Siemens Sans Roman | 12px | 16px | left |
Secondary tab label | all | Siemens Sans Bold | 14px | 20px | left |
Sizing and spacing
The following measurements show the dimensions for this component: