TabContainer

@ui5/webcomponents
<ui5-tabcontainer>

Basic TabContainer

Quibusdam, veniam! Architecto debitis iusto ad et, asperiores quisquam perferendis reprehenderit ipsa voluptate minus minima, perspiciatis cum. Totam harum necessitatibus numquam voluptatum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magni facere error dicta beatae optio repudiandae vero, quidem voluptatibus perferendis eum maiores rem tempore voluptates aperiam eos enim delectus unde. Dignissimos debitis architecto temporibus doloribus reiciendis libero rem nemo, nobis quidem dolor praesentium, beatae voluptatum iste eveniet, nam voluptatem obcaecati ducimus dolore. Possimus ipsa eos impedit aut nisi repellendus recusandae, temporibus ducimus, necessitatibus tenetur facere, minima vero fugit rem reiciendis natus ratione quia numquam? Explicabo laboriosam ab consequuntur, qui dignissimos inventore sapiente ullam quaerat ratione libero vero, beatae laudantium! Aperiam numquam tempore, laudantium perferendis recusandae autem.
<ui5-tabcontainer class="full-width" show-overflow>
	<ui5-tab text="Tab 1">
		<ui5-label>Quibusdam, veniam! Architecto debitis iusto ad et, asperiores quisquam perferendis reprehenderit ipsa voluptate minus minima, perspiciatis cum. Totam harum necessitatibus numquam voluptatum.</ui5-label>
	</ui5-tab>
	<ui5-tab icon="activities" text="Tab 2" selected>
		<ui5-label>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magni facere error dicta beatae optio repudiandae vero, quidem voluptatibus perferendis eum maiores rem tempore voluptates aperiam eos enim delectus unde.</ui5-label>
	</ui5-tab>
	<ui5-tab icon="add" text="Tab 3">
		<ui5-label>Dignissimos debitis architecto temporibus doloribus reiciendis libero rem nemo, nobis quidem dolor praesentium, beatae voluptatum iste eveniet, nam voluptatem obcaecati ducimus dolore.</ui5-label>
	</ui5-tab>
	<ui5-tab icon="calendar" text="Tab 4">
		<ui5-label>Possimus ipsa eos impedit aut nisi repellendus recusandae, temporibus ducimus, necessitatibus tenetur facere, minima vero fugit rem reiciendis natus ratione quia numquam?</ui5-label>
	</ui5-tab>
	<ui5-tab-separator></ui5-tab-separator>
	<ui5-tab icon="action-settings" text="Tab 5">
		<ui5-label>Explicabo laboriosam ab consequuntur, qui dignissimos inventore sapiente ullam quaerat ratione libero vero, beatae laudantium! Aperiam numquam tempore, laudantium perferendis recusandae autem.</ui5-label>
	</ui5-tab>
</ui5-tabcontainer>
	

TabContainer with text only tabs

<ui5-tabcontainer class="full-width" collapsed fixed show-overflow>
	<ui5-tab text="Home"></ui5-tab>
	<ui5-tab text="What's new" selected></ui5-tab>
	<ui5-tab text="Who are we"></ui5-tab>
	<ui5-tab text="About"></ui5-tab>
<ui5-tab text="Contacts"></ui5-tab>
</ui5-tabcontainer>
	

TabContainer with text and additional-text

<ui5-tabcontainer show-overflow="true" collapsed fixed>
	<ui5-tab text="Info" additional-text="3">
	</ui5-tab>
	<ui5-tab text="Attachments" additional-text="24" selected>
	</ui5-tab>
	<ui5-tab text="Notes" additional-text="16">
	</ui5-tab>
	<ui5-tab text="People" additional-text="34">
	</ui5-tab>
</ui5-tabcontainer>
	

TabContainer with tabLayout="Inline"

<ui5-tabcontainer tab-layout="Inline" show-overflow="true" collapsed fixed>
	<ui5-tab text="Monitors" additional-text="(10)">
	</ui5-tab>
	<ui5-tab text="Cameras" additional-text="(2)" selected>
	</ui5-tab>
	<ui5-tab text="Rooms" additional-text="(16)">
	</ui5-tab>
</ui5-tabcontainer>

<ui5-tabcontainer tab-layout="Inline" show-overflow="true" collapsed fixed>
	<ui5-tab icon="laptop" ext="Monitors" additional-text="(10)">
	</ui5-tab>
	<ui5-tab icon="video" text="Cameras" additional-text="(2)" selected>
	</ui5-tab>
	<ui5-tab icon="home" text="Rooms" additional-text="(16)">
	</ui5-tab>
</ui5-tabcontainer>
	

Overview

The ui5-tabcontainer represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text.

Structure

The ui5-tabcontainer can hold two types of entities:
  • ui5-tab - contains all the information on an item (text and icon)
  • ui5-tab-separator - used to separate tabs with a vertical line

ES6 Module Import

import "@ui5/webcomponents/dist/TabContainer";
import "@ui5/webcomponents/dist/Tab"; (for ui5-tab)
import "@ui5/webcomponents/dist/TabSeparator"; (for ui5-tab-separator)

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
collapsed
boolean
false
Defines whether the tab content is collapsed.
fixed
boolean
false
Defines whether the tabs are in a fixed state that is not expandable/collapsible by user interaction.
showOverflow
show-overflow
boolean
false
Defines whether the overflow select list is displayed.

The overflow select list represents a list, where all tab filters are displayed so that it's easier for the user to select a specific tab filter.
tabLayout
tab-layout
TabLayout
"Standard"
Defines the alignment of the content and the additionalText of a tab.

Note: The content and the additionalText would be displayed vertically by defualt, but when set to Inline, they would be displayed horizontally.

Available options are:
  • Standard
  • Inline

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the tabs.

Note: Use ui5-tab and ui5-tab-separator for the intended design.
overflowButton
HTMLElement
Defines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
tab-select
Fired when a tab is selected.
tab
type: HTMLElement
description: The selected tab.
tabIndex
type: Integer
description: The selected tab index.

Tab

The ui5-tab represents a selectable item inside a ui5-tabcontainer. It defines both the item in the tab strip (top part of the ui5-tabcontainer) and the content that is presented to the user once the tab is selected.

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
additionalText
additional-text
string
""
Represents the "additionalText" text, which is displayed in the tab filter.
design
SemanticColor
"Default"
Defines the component's design color.

The design is applied to:
  • the component icon
  • the text when the component overflows
  • the tab selection line


Available designs are: "Default", "Neutral", "Positive", "Critical" and "Negative".

Note: The design depends on the current theme.
disabled
boolean
false
Enabled items can be selected.
icon
string
""
Defines the icon source URI to be displayed as graphical element within the component. The SAP-icons font provides numerous built-in icons. See all the available icons in the Icon Explorer.
selected
boolean
false
Specifies if the component is selected.
text
string
""
The text to be displayed for the item.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the tab content.

TabSeparator

The ui5-tab-separator represents a vertical line to separate tabs inside a ui5-tabcontainer.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel