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.

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

tab-usage-construction-horizontal
1. Icon, 2. Text label, 3. Current tab, 4. Default tab, 5. Tab pane, 6. Nested secondary tabs, 8. Tab bar background pane

Vertical tabs

tab-usage-construction-vertical
1. Icon, 2. Text label, 3. Current tab, 4. Default tab, 5. Tab pane, 6. Nested secondary tabs, 7. Description, 8. Tab bar background pane

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.

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.

tab-usage-types-horizontal
Horizontal tabs

Horizontal tabs with secondary tabs

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

tab-usage-construction-horizontal-secondary
Horizontal tabs with secondary tabs

Frameless horizontal tabs

  • If the whole content of a 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-usage-types-frameless
Frameless horizontal tabs

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.

tab-usage-types-vertical
Vertical tabs

Vertical tabs with secondary tabs

  • The number of secondary tabs should be as small as possible. We recommend not more than 6.

tab-usage-types-vertical-secondary
Vertical tabs with secondary tabs

Do’s & Don’ts

tab-usage-do-nested

tab-usage-dont-nested

  • 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 MindSphere Design System.

Overview

Horizontal tabs

tab-style-overview-horizontal
Horizontal tabs with icon

tab-style-overview-horizontal-secondary
Horizontal tabs with icon and nested secondary tabs

Frameless tabs

tab-style-overview-frameless
Frameless tabs without icon

Vertical tabs

tab-style-overview-vertical
Large vertical tabs

tab-style-overview-vertical-secondary
Large vertical tabs and nested secondary tabs

tab-style-overview-vertical-secondary-icon
Small vertical tabs with nested secondary tabs showing only icons

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.

tab-style-overview-horizontal-states
Horizontal tabs: 1. default, 2. mouseover, 3. focus, 4. current, 5. disabled

tab-style-overview-secondary-states
Secondary tabs: 1. default, 2. mouseover, 3. focus, 4. current, 5. disabled

tab-style-overview-vertical-small
Small vertical tabs: 1. default, 2. mouseover, 3. focus, 4. current, 5. disabled

tab-style-overview-vertical-large
Large vertical tabs: 1. default, 2. mouseover, 3. focus, 4. current, 5. disabled

tab-style-overview-horizontal-types
Horizontal tab types: 1. First horizontal tab, 2. Middle horizontal tab, 3. Last horizontal tab

Color

The following table gives reference to the different colors and shades used in the component:

Name State Property Color name
Horizontal tabs, Secondary tabs, Vertical tabs default, mouseover, focus Foreground color State blue 100
Horizontal tabs, Secondary tabs, Vertical tabs current Foreground color Gray 800
Horizontal tabs, Vertical tabs default Background color Gray 100
Horizontal tabs, Vertical tabs mouseover Background color State blue 020
Horizontal tabs, Vertical tabs current Background color White
Horizontal tabs default, mouseover, current Border color Grey 200
Horizontal tabs focus Border color Cool blue
Vertical tabs description all Foreground color Grey 400
All tabs focus Background color White
All tabs focus Border color Cool Blue
All tabs disabled Foreground color Grey 200
Secondary tabs mouseover Border color State blue 100
Secondary tabs current Border color Grey 800
Tab pane all Background color White
Tab bar background pane all Background color Grey 100
Tab bar background pane all Border color Grey 200

Typography

The following table gives reference to the different font sizes and weights used in the component:

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:

tab-style-sizing-horizontal
Sizing and spacing for horizontal tabs

tab-style-sizing-horizontal-pane
Spacing for horizontal tab content

tab-style-sizing-frameless-pane
Sizing and spacing for frameless tabs

tab-style-sizing-secondary
Sizing and spacing for secondary tabs

tab-style-sizing-vertical-small
Sizing and spacing for small vertical tabs

tab-style-sizing-vertical-large
Sizing and spacing for large vertical tabs

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top