Skip to main content

TabContainer

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.

Keyboard Handling​

Fast Navigation​

This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [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.js";

import "@ui5/webcomponents/dist/Tab.js"; (for ui5-tab)

import "@ui5/webcomponents/dist/TabSeparator.js"; (for ui5-tab-separator)

Basic Sample​

Properties​

fixed​

DescriptionDefines whether the tabs are in a fixed state that is not expandable/collapsible by user interaction.
Typeboolean
Defaultfalse

collapsed​

DescriptionDefines whether the tab content is collapsed.
Typeboolean
Defaultfalse

showOverflow​

DescriptionDefines 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.
Typeboolean
Defaultfalse
DeprecatedSince the introduction of TabsOverflowMode, overflows will always be visible if there is not enough space for all tabs, all hidden tabs are moved to a select list in the respective overflows and are accessible via the overflowButton and / or startOverflowButton slots.

tabLayout​

DescriptionDefines 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.
Type"Inline" | "Standard"
Default"Standard"

tabsOverflowMode​

DescriptionDefines 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.
Type"End" | "StartAndEnd"
Default"End"
Since1.1.0

headerBackgroundDesign​

DescriptionSets the background color of the Tab Container's header as Solid, Transparent, or Translucent.
Type"Solid" | "Transparent" | "Translucent"
Default"Solid"
Since1.10.0

contentBackgroundDesign​

DescriptionSets the background color of the Tab Container's content as Solid, Transparent, or Translucent.
Type"Solid" | "Transparent" | "Translucent"
Default"Solid"
Since1.10.0

allItems​

DescriptionReturns all slotted tabs and their subTabs in a flattened array. The order of tabs is depth-first.
TypeArray<ITab>
Default[]
Readonlytrue

Slots​

default​

DescriptionDefines the tabs.
Note: Use ui5-tab and ui5-tab-separator for the intended design.
TypeArray<ITab>

overflowButton​

DescriptionDefines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used.
TypeArray<IButton>
Since1.0.0-rc.9

startOverflowButton​

DescriptionDefines the button which will open the start overflow menu if available. If nothing is provided to this slot, the default button will be used.
TypeArray<IButton>
Since1.1.0

Events​

tab-select​

DescriptionFired when a tab is selected.
TypeCustomEvent<TabContainerTabSelectEventDetail>
Parameterstab: ITab
The selected tab.
tabIndex: Integer
The selected tab index in the flattened array of all tabs and their subTabs, provided by the allItems getter.

Methods​

No methods available for this component.

CSS Parts​

NameDescription
contentUsed to style the content of the component
tabstripUsed to style the tabstrip of the component

More Samples​

Tab Layout​

Text-only Tabs​

Nested Tabs​

Tabs Overflow Mode​