A set of tabs that can trigger changes in the associated content area. Unlike tabSheet, this component cannot hold any content within itself.

  • XML element: tabs

  • Java class: Tabs


By default, tabs are displayed in a horizontal row, with the tab labels arranged one after another. This row of tabs is typically positioned at the top or bottom of the associated content area.

The following example demonstrates basic tabs functionality.

tabs basic
XML code
<tabs id="tabs">
    <tab id="tab1" label="Tab One"/>
    <tab id="tab2" label="Tab Two"/>

In this example, the component contains two nested tab elements. To update the content associated with the selected tab, define an event handler that listens for the SelectedChangeEvent. When a tab is selected, this event is fired, allowing you to update the displayed content accordingly.


While horizontal orientation is default, vertical orientation can be alternative option in certain scenarios. For example, with a larger number of tabs, this orientation may provide additional space for their labels.

tabs vertical

Use the orientation attribute to change the orientation of tabs.


A tab can be selected, unselected, or disabled:

tabs states

These states allow users to easily determine which tab is currently active and which tabs may be temporarily unavailable or disabled.


Individual tabs can nest almost any components within them. This allows to compose visually distinctive tab labels:

tabs basic2
XML code
    <tab id="profileTab">
        <icon icon="USER"/>
        <span text="Profile"/>
    <tab id="notificationsTab">
        <icon icon="BELL"/>
        <span text="Notifications"/>
    <tab id="settingsTab">
        <icon icon="COG"/>
        <span text="Settings"/>

Theme Variants

The component’s appearance is customizable with the themeNames attribute. Choose from the following themes and combine them together as needed:


When a tab label includes an icon, positions it above the text label instead of displaying them side-by-side:

tabs icon on top

Each tab element must have this theme applied to it individually.

Show XML
    <tab id="profileTab" themeNames="icon-on-top">
        <icon icon="USER"/>
        <span text="Profile"/>
    <tab id="notificationsTab" themeNames="icon-on-top">
        <icon icon="BELL"/>
        <span text="Notifications"/>
    <tab id="settingsTab" themeNames="icon-on-top">
        <icon icon="COG"/>
        <span text="Settings"/>


Positions the tabs at the center of the container or view, instead of their default left-aligned position:

tabs centered


Makes the tabs smaller:

tabs small


Reduces visual style to only show tab labels without any additional visual elements:

tabs minimal


Hides the scroll buttons that assist in navigating overflown tabs:

tabs hide scroll buttons

Note that horizontal scrolling may be difficult with these buttons disabled.


Allocates an equal amount of space to each tab and disables the ability to scroll:

tabs equal width



Defines tabs orientation. Possible values:

  • HORIZONTAL – tabs are placed horizontally. This is the default value.

  • VERTICAL – tabs are placed vertically.


To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the CodeGenerate menu (Alt+Insert / Cmd+N).


com.vaadin.flow.component.tabs.Tabs.SelectedChangeEvent is fired when another tab is selected.

The following example adds a label when a tab is selected:

private VerticalLayout content;

public void onTabsSelectedChange(final Tabs.SelectedChangeEvent event) {
private void setTabContent(Tab tab) {
    Div tabLabel = uiComponents.create(Div.class);
    if ("tab1".equals(tab.getId().orElse(null))) {
        tabLabel.setText("Tab One is selected");
    } else {
        tabLabel.setText("Tab Two is selected");


To add an element in Jmix Studio, select the component in the view descriptor XML or in the Jmix UI structure panel and click on the Add button in the Component Inspector panel.


Individual tabs are defined with nested tab elements.

tab attributes
tab handlers

See Also

See the Vaadin Docs for more information.