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.
There are the following tab types:
- 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.
- 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.
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:
- 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.
- 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.
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.
This chapter shows several tabs styles in the design system.
- 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.
The following table gives reference to the different font sizes and weights:
|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: