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.

Best practices¶

• 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. Active tab, 2. Badge (optional), 3. Default tab, 4. Overflow menu

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¶

When there isn’t enough space to display all the tabs, the ones that no longer fit collapse into a menu. This menu contains all the tabs in the same order, ensuring consistent navigation while optimizing space.

Code¶

Usage¶

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

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

Tabs¶

Tabs - Routing¶

Tabs - Icons¶

SiTabsetComponent API Documentation¶

A component to group multiple tabs together. Can either be used with SiTabLinkComponent or SiTabComponent components.

No API to document for this.

SiTabComponent API Documentation¶

Creates a normal tab that can contain any content.

Example:

<si-tabset>
  <si-tab heading="Tab 1">
    <p>Content of Tab 1</p>
  </si-tab>
</si-tabset>

Input Properties¶

Name	Type	Default	Description
active ¶	boolean	false	Whether the tab is active or not. If set to true , the tab will be selected and its content will be displayed.
badgeColor ¶	string		Background color of the badge. If no color is provided a red dot badge will be rendered.
badgeContent ¶	(boolean | TranslatableString)		Additional badge content. A value of - true will render a red dot - any string without a badgeColor will render a red dot with text - any string with a badgeColor will render a normal badge
canActivate ¶	() => boolean		Guard to check if the tab can be activated. If not provided, the tab can always be activated.
canDeactivate ¶	() => boolean		Guard to check if the tab can be deactivated. If not provided, the tab can always be deactivated.
closable ¶	boolean	false	Close the current tab.
disabled ¶	boolean	false	Disables the tab.
heading ¶	TranslatableString		Title of the tab item.
icon ¶	string		Icon of the tab item. If provided, heading text will be ignored and only icon will be displayed.

Output Properties¶

Attributes and Methods¶

SiTabLinkComponent API Documentation¶

Creates a tab that uses the Angular router.

Example:

<si-tabset>
  <a si-tab routerLink="/home" heading="Home"></a>

  <router-outlet />
</si-tabset>

Input Properties¶

Name	Type	Default	Description
badgeColor ¶	string		Background color of the badge. If no color is provided a red dot badge will be rendered.
badgeContent ¶	(boolean | TranslatableString)		Additional badge content. A value of - true will render a red dot - any string without a badgeColor will render a red dot with text - any string with a badgeColor will render a normal badge
closable ¶	boolean	false	Close the current tab.
disabled ¶	boolean	false	Disables the tab.
heading ¶	TranslatableString		Title of the tab item.
icon ¶	string		Icon of the tab item. If provided, heading text will be ignored and only icon will be displayed.

Output Properties¶

Attributes and Methods¶

Types Documentation¶

Code (legacy)¶

Element implements tabset and tab components that provide the correct styling and responsive behavior. It supports the usage combined with the Angular router (preferred way) or alternatively as plain components.

Note: This is the legacy tabs implementation. For new projects, use the improved tabs component.

Tabs with Angular Router¶

When using the tabs with the Angular router, each tab is just an anchor with a routerLink. Make sure to nest the <router-outlet /> inside the si-tabset-legacy component as the tabset applies some accessibility attributes. No need to apply routerLinkActive, this is done automatically.

<si-tabset-legacy>
  <a si-tab-legacy heading="Tab 1" routerLink="./tab-1"></a>
  <a si-tab-legacy heading="Tab 2" routerLink="./tab-2"></a>

  <router-outlet />
</si-tabset-legacy>

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { SiTabsetLegacyComponent, SiTabLegacyComponent } from '@siemens/element-ng/tabs-legacy';

@Component({
  templateUrl: './my-component.html',
  imports: [
    SiTabsetLegacyComponent,
    SiTabLegacyComponent,
    RouterLink
  ]
})
export class MyComponent { }

A corresponding route definition looks like this:

import { Route } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: 'tab-1', pathMatch: 'full' }, // Select the first tab by default
  { path: 'tab-1', component: Tab1Component },
  { path: 'tab-2', component: Tab2Component },
]

Tabs with plain components¶

In general, using the tabs with the Angular router is preferred as the state is stored in the URL. So deep-linking and bookmarking is supported. In some cases, this might not be needed, e.g. when using the tabs to group simple information on a page.

In this case, you can use the si-tabset component with si-tab components as children.

<si-tabset-legacy>
  <si-tab-legacy heading="Tab 1">Tab 1 content</si-tab-legacy>
  <si-tab-legacy heading="Tab 2" [active]="true">Tab 2 content</si-tab-legacy>
</si-tabset-legacy>

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { SiTabsetLegacyComponent, SiTabLegacyComponent } from '@siemens/element-ng/tabs-legacy';

@Component({
  templateUrl: './my-component.html',
  imports: [
    SiTabsetLegacyComponent,
    SiTabLegacyComponent
  ]
})
export class MyComponent { }

By default, no tab is active until the user clicks one. You can set the active property to true on one of the tabs to make it active by default. Ensure that only one tab has the active property set to true. Otherwise, the behavior is undefined.

Closable tabs¶

Both tab variants can be used as a closable tab. A tab that can be closed must be explicitly marked as closable by setting the closable property to true.

<si-tabset-legacy>
  @if(showTab1) {
    <a si-tab-legacy heading="Tab 1" routerLink="./tab-1" closable (closeTriggered)="removeTab1()"></a>
  }
</si-tabset-legacy>

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { SiTabsetLegacyComponent, SiTabLegacyComponent } from '@siemens/element-ng/tabs-legacy';

@Component({
  templateUrl: './my-component.html',
  imports: [
    SiTabsetLegacyComponent,
    SiTabLegacyComponent,
    RouterLink
  ]
})
export class MyComponent {
  showTab1 = true;

  removeTab1() {
    this.showTab1 = false;
  }
}

The tabset does not automatically remove a closed tab. When closeTriggered is emitted, you need to handle the removal of the tab in your component logic.

SiTabsetLegacyComponent API Documentation¶

Deprecated: Use the new components from @siemens/element-ng/tabs instead. See https://element.siemens.io/components/layout-navigation/tabs/#code for usage instructions.

Input Properties¶

Output Properties¶

SiTabLegacyComponent API Documentation¶

Deprecated: Use the new components from @siemens/element-ng/tabs instead. See https://element.siemens.io/components/layout-navigation/tabs/#code for usage instructions.

Input Properties¶

Output Properties¶