Tabs

The first tab you add to Tabs or Tab Sheet is automatically selected. Similarly, when a selected tab is removed, the next available tab is automatically selected.

Autoselect is enabled by default, but you can disable this behavior if needed. Notice how none of the tabs in the example below are initially selected.

When using autoselect and tab selection change listeners, you should add selection change listeners before adding any tabs if you want the listeners to trigger for the automatically selected tab.

Horizontal tabs may be easier for users to understand and associate with the content. They’re best suited for a small number of items, but provide scrolling on overflow. Try scrolling horizontally the tabs in the example here: you’ll see that there are more than the initially visible ones.

In horizontal orientation, scroll buttons are displayed by default to aid scrolling the tabs. These can be disabled by applying the hide-scroll-buttons theme variant. Notice in the example below that there’s no scrollbar or scroll buttons, but you can still scroll to reveal the overflowing tabs.

Vertical tabs can sometimes be a better choice for a large number of items. It’s easier for the user to scan a vertical list of options. However, they may not always be easy to understand and associate with the content.

Vertical tabs also provide scrolling on overflow, but no scroll buttons. Incidentally, vertical orientation is not available for Tab Sheets.

Icons can be used to make tabs more prominent and easier to identify. They can be added next to the labels or above them. Generally, horizontal tabs work best with icons above the labels, as you can see in the example below.

Vertical tabs work best with icons next to labels, as you can see here.

Icon-only labels may sometimes be appealing, but they should provide a textual description using a Tooltip, or an aria-label attribute for assistive technologies.

Tabs can contain almost any UI elements. For instance, they can contain badges indicating the number of items per tab. In this example, there’s a gray box with a number to the right of each tab label, indicating the count for each.

By default, tabs are left-aligned. They can be centered using the centered theme variant.

You can use this variant to suit your visual and stylistic preference. It’s typically used for top-level navigation. However, use it only where appropriate since by default left-aligned tabs are more discoverable and what most users expect.

Apply the equal-width-tabs theme variant to make each tab share equally the available space. This disables the ability to scroll, though, since the content never overflows.

Use this variant when there are a small number of tabs in a narrow space, such as for a tabbed sidebar and for mobile (i.e., portrait) layouts.

The minimal theme variant reduces visual styles to a minimum.

You can generally use this to reduce visual clutter. However, use it with caution as it reduces the visual distinction of selected tabs to color only. This can be difficult to discern for many users.

The small theme variant can be used to make the Tabs smaller. This can be good when space is limited. Compare the tabs here to previous ones. You can see these are slightly smaller.

The bordered theme variant adds a border around the Tab Sheet component.

Using the integrated content areas in Tab Sheet is the easiest way to switch among the different content for each tab. Sometimes, such as when the tabs need to be separated structurally from their content areas, it may be necessary to use the stand-alone Tabs component and manually implement content switching.

Try clicking on each tab here. Notice how the text content changes depending on which you select.

Sometimes it can be desirable to initialize the contents for a tab, lazily. That is to say, delay its initialization until the tab is selected. When you first click on one of the tabs below, you’ll notice a loading indicator, and a short delay until the tab content is displayed for each.