Tabs
- Tab Sheet
- States
- Orientation and Overflow
- Icons and Other Tab Content
- Theme Variants
- Prefix and Suffix
- Focus and Keyboard
- Common Cases
- Related Components
Tabs are used to organize and group content into sections that the user can navigate between.
new tab
Source code
tabs-basic.ts
tabs-basic.ts
TabsBasic.java
TabsBasic.java
Use Tabs when you want to allow in-place navigation within a certain part of the UI, instead of showing everything at once or forcing the user to navigate between different views.
Tab Sheet
Tabs are most conveniently used as part of a Tab Sheet that includes automatically switched content areas for each tab.
new tab
Source code
tabsheet-basic.ts
tabsheet-basic.ts
TabSheetBasic.java
TabSheetBasic.java
States
A Tab can be selected, unselected, or disabled.
new tab
Source code
tabs-states.ts
tabs-states.ts
TabsStates.java
TabsStates.java
Disable a Tab to mark it as unavailable. Disabled Tabs can’t be focused and may be invisible to assistive technologies, such as screen readers.
Disabling can be preferable to hiding an element to prevent changes in layout when the element’s visibility changes. They can also make users aware of its existence even when unavailable.
Autoselect (Java Only)
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.
new tab
Source code
TabsAutoselect.java
TabsAutoselect.java
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.
Orientation and Overflow
Tabs support two different orientations: horizontal (default) and vertical, which is not currently supported in Tab Sheets. Base your choice of orientation on the use case and the available space.
Horizontal
Horizontal tabs may be easier for users to understand and associate with their content. They are best suited for a small number of items, but provide scrolling on overflow.
new tab
Source code
tabs-horizontal.ts
tabs-horizontal.ts
TabsHorizontal.java
TabsHorizontal.java
In horizontal orientation, scroll buttons are displayed by default in aid scrolling the tabs.
These can be disabled by applying the hide-scroll-buttons
theme variant.
new tab
Source code
tabs-hide-scroll-buttons.ts
tabs-hide-scroll-buttons.ts
TabsHideScrollButtons.java
TabsHideScrollButtons.java
Note
|
Hiding the scroll buttons isn’t recommended for UIs designed to be operated on non-touchscreen devices, as horizontal scrolling can be difficult without them. |
Vertical
Vertical tabs can 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 be easy to understand and associate with their content. Vertical tabs also provide scrolling on overflow, but no scroll buttons.
new tab
Source code
tabs-vertical.ts
tabs-vertical.ts
TabsVertical.java
TabsVertical.java
Vertical orientation isn’t available for Tab Sheets.
Icons and Other Tab Content
Tabs can contain more than text.
Icons
Icons can be used to make tabs more prominent and easier to identify. They can be added next to, or above, the labels.
Horizontal Tabs work best with icons above the labels.
new tab
Source code
tabs-icons-horizontal.ts
tabs-icons-horizontal.ts
TabsIconsHorizontal.java
TabsIconsHorizontal.java
Vertical Tabs work best with icons next to labels.
new tab
Source code
tabs-icons-vertical.ts
tabs-icons-vertical.ts
TabsIconsVertical.java
TabsIconsVertical.java
Icon-only labels should provide a textual description using a Tooltip, or an aria-label
attribute for assistive technologies.
Other Elements
Tabs can contain almost any UI elements, such as badges indicating the number of items per tab.
new tab
Source code
tabs-badges.ts
tabs-badges.ts
TabsBadges.java
TabsBadges.java
Theme Variants
Centered
By default, Tabs are left-aligned.
They can be centered using the centered
theme variant.
new tab
Source code
tabs-theme-centered.ts
tabs-theme-centered.ts
TabsThemeCentered.java
TabsThemeCentered.java
Usage Recommendations
-
Visual and stylistic preference.
-
Typically used for top-level navigation.
-
Use with caution: default left-aligned tabs are more discoverable.
Equal-Width Tabs
Apply the equal-width-tabs
theme variant to make each Tab share equally the available space.
This disables the ability to scroll, as the content never overflows.
new tab
Source code
tabs-theme-equal-width.ts
tabs-theme-equal-width.ts
TabsThemeEqualWidth.java
TabsThemeEqualWidth.java
Usage Recommendations
For a small number of tabs in a narrow space, such as:
-
Tabbed sidebar; and
-
Mobile (portrait) layouts.
Minimal
Reduces visual styles to a minimum.
new tab
Source code
tabs-theme-minimal.ts
tabs-theme-minimal.ts
TabsThemeMinimal.java
TabsThemeMinimal.java
Usage Recommendations
-
To reduce visual clutter.
-
Use with caution, as this reduces the visual distinction of selected tabs to color only. This can be difficult to discern for many users.
Small
The small
theme variant can be used to make the Tabs smaller. This can be good when space is limited.
new tab
Source code
tabs-theme-small.ts
tabs-theme-small.ts
TabsThemeSmall.java
TabsThemeSmall.java
Bordered
The bordered
theme variant adds a border around the Tab Sheet component.
new tab
Source code
tabsheet-theme-bordered.ts
tabsheet-theme-bordered.ts
TabSheetThemeBordered.java
TabSheetThemeBordered.java
Prefix and Suffix
Custom content can be placed before or after the tabs in a Tab Sheet by placing it in the prefix
and suffix
slots.
new tab
Source code
tabsheet-prefix-suffix.ts
tabsheet-prefix-suffix.ts
TabSheetPrefixSuffix.java
TabSheetPrefixSuffix.java
Focus and Keyboard
Tab focus is rendered differently when focused by keyboard.
new tab
Source code
tabs-focus-ring.ts
tabs-focus-ring.ts
Once a tab is focused, arrow keys can be used to move the focus between tabs. Press Enter or Space to select the focused tab.
Common Cases
Content Switching without Tab Sheet
Using the integrated content areas in Tab Sheet is the easiest way to switch between 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 implement content switching, manually.
new tab
Source code
tabs-content.ts
tabs-content.ts
TabsContent.java
TabsContent.java
Lazy Initialization of Tab Contents
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.
new tab