UI5 Web Components
Search

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">
	<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>
	<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>

Text only End Overflow

<ui5-tabcontainer class="full-width" collapsed fixed>
	<ui5-tab text="Tab 1"></ui5-tab>
	<ui5-tab text="Tab 2" ></ui5-tab>
	...
	<ui5-tab text="Tab 13" selected ></ui5-tab>
	...
	<ui5-tab text="Tab 22"></ui5-tab>
	<ui5-tab text="Tab 23"></ui5-tab>
</ui5-tabcontainer>

Text only Start and End Overflow

<ui5-tabcontainer class="full-width" collapsed fixed>
	<ui5-tab text="Tab 1"></ui5-tab>
	<ui5-tab text="Tab 2" ></ui5-tab>
	...
	<ui5-tab text="Tab 17" selected ></ui5-tab>
	...
	<ui5-tab text="Tab 32"></ui5-tab>
	<ui5-tab text="Tab 33"></ui5-tab>
</ui5-tabcontainer>

TabContainer with text and additional-text

<ui5-tabcontainer collapsed fixed tabs-overflow-mode="StartAndEnd">
	<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" 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" collapsed fixed>
	<ui5-tab icon="laptop" text="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>

TabContainer with nested tabs

Notes go here ... Products go here ... Computers go here ... Laptops go here ... Work Stations go here ... Game Stations go here ... Desktops go here ... Smartphones go here ... Tablets go here ... Phones go here ... Orders go here ... Order attachments go here ... 
<ui5-tabcontainer collapsed>
	<ui5-tab text="Notes">
		Notes go here ...
	</ui5-tab>
	<ui5-tab text="Products">
		Products go here ...
		<ui5-tab slot="subTabs" text="Computers">
			Computers go here ...
			<ui5-tab slot="subTabs" text="Laptops">
				Laptops go here ...
			</ui5-tab>
			<ui5-tab slot="subTabs" text="Desktops">
				<ui5-tab slot="subTabs" text="Work Stations">
					Work Stations go here ...
				</ui5-tab>
				<ui5-tab slot="subTabs" text="Game Stations">
					Game Stations go here ...
				</ui5-tab>
				Desktops go here ...
			</ui5-tab>
		</ui5-tab>
		<ui5-tab text="Phones" slot="subTabs">
			<ui5-tab text="Smartphones" slot="subTabs">
				Smartphones go here ...
			</ui5-tab>
			<ui5-tab text="Tablets" slot="subTabs">
				Tablets go here ...
			</ui5-tab>
			Phones go here ...
		</ui5-tab>
	</ui5-tab>
	<ui5-tab text="Orders">
		Orders go here ...
		<ui5-tab slot="subTabs" text="Attachments">
			Order attachments go here ...
		</ui5-tab>
	</ui5-tab>
</ui5-tabcontainer>

TabContainer Design Background

Header Background
Content Background
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita voluptates accusamus est quibusdam inventore ipsam? Accusamus minus aperiam sunt ipsam eos quos et maxime facilis tempora neque ratione nemo laborum expedita aliquid officiis nisi, necessitatibus quasi distinctio? Dolores totam perferendis numquam incidunt obcaecati, id quo at alias rem deserunt praesentium repellat ipsum commodi consequuntur veniam et ducimus animi qui nobis accusantium tenetur eveniet culpa non! 
<ui5-tabcontainer id="tabContainerBackgroundDesign" header-background-design="Solid" content-background-design="Transparent">
	<ui5-tab text="Tab 1" selected>
		<ui5-label>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita voluptates accusamus est quibusdam inventore ipsam?</ui5-label>
	</ui5-tab>
	<ui5-tab text="Tab 2">
		<ui5-label>Accusamus minus aperiam sunt ipsam eos quos et maxime facilis tempora neque ratione nemo laborum expedita aliquid officiis nisi, necessitatibus quasi distinctio?</ui5-label>
	</ui5-tab>
	<ui5-tab text="Tab 3">
		<ui5-label>Dolores totam perferendis numquam incidunt obcaecati, id quo at alias rem deserunt praesentium repellat ipsum commodi consequuntur veniam et ducimus animi qui nobis accusantium tenetur eveniet culpa non!</ui5-label>
	</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 line

Hierarchies

Multiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations to indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split to allow the user to display the content or alternatively to expand / collapse the list of sub tabs.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-tabcontainer exposes the following CSS Shadow Parts:
  • content - Used to style the content of the component

Keyboard Handling

Fast Navigation

This component provides a build in fast navigation group which can be used via F6 / Shift + F6 or Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up. In order to use this functionality, you need to import the following module: import "@ui5/webcomponents-base/dist/features/F6Navigation.js"

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
allItems (readonly)
all-items
undefined
Returns all slotted tabs and their subTabs in a flattened array. The order of tabs is depth-first. For example, given the following slotted elements: ... ... ... ... Calling allItems on this TabContainer will return the instances in the following order: [ ui5-tab#First, ui5-tab#Nested, ui5-tab#Second, ui5-tab-separator#sep, ui5-tab#Third ]
collapsed
boolean
false
Defines whether the tab content is collapsed.
contentBackgroundDesign
content-background-design
TabContainerBackgroundDesign
"Solid"
Sets the background color of the Tab Container's content as Solid, Transparent, or Translucent.
since v1.10.0
fixed
boolean
false
Defines whether the tabs are in a fixed state that is not expandable/collapsible by user interaction.
headerBackgroundDesign
header-background-design
TabContainerBackgroundDesign
"Solid"
Sets the background color of the Tab Container's header as Solid, Transparent, or Translucent.
since v1.10.0
showOverflow
show-overflow
boolean
false
Defines whether the overflow select list is displayed.

The overflow select list represents a list, where all tabs are displayed so that it's easier for the user to select a specific tab.
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 default, but when set to Inline, they would be displayed horizontally.

Available options are:
  • Standard
  • Inline
tabsOverflowMode
tabs-overflow-mode
TabsOverflowMode
"End"
Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible. All other tabs that can 't fit on the screen are available in an overflow tab "More".

Note: Only one overflow at the end would be displayed by default, but when set to StartAndEnd, there will be two overflows on both ends, and tab order will not change on tab selection.

Available options are:
  • End
  • StartAndEnd
since v1.1.0

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.
startOverflowButton
HTMLElement
Defines the button which will open the start overflow menu if available. 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 in the flattened array of all tabs and their subTabs, provided by the allItems getter.

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.
design
sap.ui.webc.main.types.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
Disabled tabs can't 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]
Holds the content associated with this tab.
subTabs
sap.ui.webc.main.ITab [0..n]
Defines hierarchies with nested sub tabs.

Note: Use ui5-tab and ui5-tab-separator for the intended design.

Methods

This Web Component exposes public methods. You can invoke them directly on the Web Component instance.

Name
Description
getTabInStripDomRef
Returns the DOM reference of the tab that is placed in the header. Note: Tabs, placed in the subTabs slot of other tabs are not shown in the header. Calling this method on such tabs will return null. Note: If you need a DOM ref to the tab content please use the getDomRef method.

TabSeparator

The ui5-tab-separator represents a vertical line to separate tabs inside a ui5-tabcontainer.

Methods

This Web Component exposes public methods. You can invoke them directly on the Web Component instance.

Name
Description
getTabInStripDomRef
Returns the DOM reference of the separator that is placed in the header. Note: Tabs and separators, placed in the subTabs slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return null.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel