Tabs¶

Usage¶

When to use¶

• Use tabs to group content that belongs to the same category.
• Use tabs when there is a large amount of content that can be separated.
• Use tabs to make the content accessible without navigating across pages 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.

When tabs may not help¶

• Don't mix different content types within the same tab structure.
• Avoid nested tabs (2 levels of tabs stacked on top of each other) since they add visual complexity, and are harder to navigate.

Design¶

Elements¶

1. Current tab, 2. Tab label, 3. Badge, 4. Default tab, 5. Tab bar background pane, 6. Extension arrow, 7. Tab pane

Tab Label¶

• The label describes the content contained within it.
• Labels are concise and use no more than two words.
• Tab labels should be written in title case and all words should be proper nouns.
• The label will not be truncated and uses the space it needs.
• The minimum width of a tab is 124px.

Number of Tabs¶

In most scenarios, you should use no more than six tabs. This ensures an uncluttered UI and reduces cognitive load for users. If more than six tabs are needed, consider other navigation patterns.

Order¶

The order of all tabs should be consistent across all pages. Tabs with related content should be grouped adjacent to each other. The most important tab should be the first.

Badge¶

A small badge (dot) can be displayed in tabs to indicate when new information is available. The badge can also contain a number to display the amount of notifications.

Icon Tabs¶

If there is not enough space to display meaningful labels, a tab version with icons can be used.

Note: This version only works with meaningful icons!

Closable tabs¶

This variation allows users to open multiple tabs for multitasking or comparing information side by side, and subsequently close them as needed. They can be used in combination with badges.

Note: Closable tabs cannot be used in combination with icons.

Responsive Behavior¶

The tab component adds symmetrically navigation arrows to either side when there is not enough space to display all the tabs. The newly selected tab will stay at its selected position (e.g. Tab 5).

Code¶

Element provides its own tab component to allow for the desired responsive behavior.

Usage¶

si-tabs can be imported using the module

import { SiTabsModule } from '@siemens/element-ng/tabs';

@NgModule({
  imports: [SiTabsModule, ...]
})

or as a standalone component:

import { SiTabComponent, SiTabsetComponent } from '@siemens/element-ng/tabs';

@Component({
  imports: [
    SiTabComponent,
    SiTabsetComponent,
    ...
  ]
})

Tabs - Basic¶

Tabs - Responsive Behavior¶