The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to navigate between subpages for an object, as a filter, or to visualize process steps.

Tab bar – live example

When to Use

Use the tab bar:

• To display multiple subpages for a business object on one page.
• To let users switch easily between subpages.
• To visualize clear-cut process steps.
• To offer prominent, one-click visual filters above a set of items.

Don’t use the tab bar:

• To show only a single tab.

Anatomy

Tab Bar

1. Main bar: Contains two types of element:
   1. Tab: The clickable item inside the tab container.
   2. Tab separator: Visual indicator used to separate the tabs.
2. Overflow menu: Contains any remaining tabs that can’t be displayed in the available space.
3. Content area: Contains the content for the selected tab.

Tab

1. Icon: Icon for the tab.
2. Text: Text for the tab.
3. Additional text: Supplementary text for a tab, such as a count.
4. Subtabs: A tab can contain subtabs. For details, see Hierarchies.

The visual representation of the tab adapts automatically, depending on the elements it contains.

Variants

You can use different tab bar variants, depending on your use case:

• Text tabs
• Icon tabs
• Filter tabs
• Process tabs

Text Tabs

Text tabs allow longer labels, which are not truncated. They can also display a count after the text to indicate number of items on the tab page.

Tab bar with text tabs – live example

Icon Tabs

These round tabs can be populated with any icon. Labels are optional. If you decide to use labels, use them for all tabs. You can use additional text as needed.

Tab bar with icon tabs – live example

Filter Tabs

When used as a filter, the tab bar can contain a tab for displaying all items (optional), in addition to the individual tabs for each filter attribute. We strongly recommend showing the count as an additional text for every tab.

Tab bar with filter tabs – live example

Process Tabs

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

Tab bar with process tabs – live example

Behavior and Interaction

Selection

Only one tab can be selected at a time. Selecting a new tab deselects the tab that was displayed previously.

Tab selection – live example

Hierarchies

The tab bar supports hierarchies, allowing you to group multiple tabs under a main tab. The label of the main tab then serves as the heading for the group. An arrow indicates that a tab has subtabs.

If the parent tab has its own content, it is separated into two interactive areas, like a split button:

• Clicking the left area (text) displays the content for the parent tab.
• Clicking the right area (arrow) opens a menu with the subtabs.

Parent tabs with own content – live example

If the parent tab doesn’t have its own content, it has only one interactive area. Clicking the main tab opens the menu with the available subtabs.

Parent tabs without own content – live example

Responsive Behavior

Overflow

If there isn’t enough space to show all the tabs on the main bar, an overflow menu appears automatically, containing all the remaining tabs.

You can set the overflow mode, depending on your use case:

• End (default): The overflow only appears at the end of the tab bar. Use this mode if the order of the tabs isn’t relevant.
• Start and End: The overflow menu can appear dynamically either on one or on both sides of the tab bar. Where the overflow appears depends on which tab is activated. Use this mode if the tabs need to stay in the same order.

You can also replace the buttons for the overflow menus with custom buttons.

Overflow mode ‘End’ – live example

Overflow mode ‘Start and End’ – live example

Related Links