Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
Tab items should have a label for accessibility. If a label isn’t present, it must include an icon and becomes an icon-only tab item.
Icons can be displayed in tab items. Icons should only be used in a tab item when absolutely necessary: when adding essential value and having a strong association with the label. Icons should not be used just as decoration. If the tab item does not have a visible label, it must still have a tooltip to disclose the label.
A tab item in a selected state shows the current tab item. This is shown with a selection indicator (a gray-900 line) under or next to the selected tab item.
A tab item in a disabled state shows that the tab item exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that the tab item may become available later.
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.
Property | Values | Default value |
---|---|---|
label | text / nothing | – |
icon | icon / nothing | nothing |
is selected | yes / no | no |
is disabled | yes / no | no |
Tabs can be either horizontal or vertical. By default, tabs are horizontal and should be used when horizontal space is limited.
Vertical tabs should be used when horizontal space is more generous and when the list of sections is greater than can be presented to the user in a horizontal format. They can also be used as an anchor link experience when displaying shortcuts to sections of content on a single page. Rather than exposing a new tab view, the tab items can link to an on-page anchor.
Tabs come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
Tabs come in 2 densities: regular and compact. The compact density retains the same font size, but has tighter spacing. The compact tabs are best used inside a panel or rail, or for other small containers.
Horizontal tabs can be set to a fluid height. This means the vertical padding becomes flexible in order to fill the height of the container that the tabs component is placed in and also overrides the density option. This is often used in headers.
By default, tabs have a divider that spans across all tab items. This style works as a way to anchor them to the page. These types of tabs are best used at the top of a page, as a top-level navigation.
Alternatively, quiet tabs have no visible divider across the tab items apart from the one that shows the selected tab item. These should be used as sub-level navigation or for containers.
By default, tabs are not emphasized. This is optimal for when the tabs component is not the core part of an interface.
Emphasized tabs have blue text for the selected state for visual prominence and to draw more attention to them. This is optimal for when the selection should call attention, such as the main navigation for a website.
Tabs have the option to set the alignment of tab items to start (left) or center. By default, tab items are aligned to the start (left) of the container. Center-aligned tabs are often used as top-level navigation for editorial websites.
Only one tab item can be selected at any given time. This property changes an individual tab item’s selected state.
There are two possible behaviors for interacting with tabs using a keyboard: manual (default) or automatic activation. Typically, manual activation of tabs is only necessary when content cannot be displayed instantly (i.e., not all the panel content is present in the Document Object Model.) For additional guidance, view Deciding When to Make Selection Automatically Follow Focus. The keyboard interactions section on this page has more details on the specific interactions for tabs.
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.
Property | Values | Default value |
---|---|---|
orientation | horizontal / vertical | horizontal |
size | small / medium / large / extra-large | medium |
density | regular / compact | regular |
is fluid | yes / no This overides density and is only applicable to horizontal tabs. | no |
is quiet | yes / no | no |
is emphasized | yes / no | no |
alignment | start / center | start |
selected item | (list of available items) | – |
keyboard activation | manual / automatic | manual |
When the user selects a tab item, the selection indicator slides along the base of the tabs to the newly selected tab item. The text and icon colors of both tab items fade during this transition. At the time of selection, the tab views change immediately.
When there are too many tabs to fit horizontally across the viewport, the tabs component can be displayed as a quiet picker.
When appropriate, you can use alternative methods of overflowing tabs such as horizontal scrolling.
When the tab item text is too long for the available horizontal space, it truncates at the end. This should only happen when the rest of the tab items have already been grouped into a picker. The full text should be revealed with a tooltip on hover and in the picker menu.
When there are too many tabs to fit horizontally across the viewport, you can either allow horizontal scrolling or place all tab items in a quiet picker. Do not truncate multiple tab items just to make them fit horizontally.
Use tabs to organize sections of equal importance. Groups of content under each tab item should not be of different natures. Don't use tabs to replace a flow; use pagination components instead.
Avoid having multiple levels of tabs. Instead, consider using other forms of organization such as side navigation, accordions, or collapsible panels. Nesting tabs is acceptable when there is a high degree of separation between the two tab experiences, or when different orientations are used. Do not compromise having a clear hierarchy by using the same variations or orientations of tabs.
Don’t mix the use of icons in tabs. Navigation controls require a clear spacial relationship to one another, and mixing the use of icons can dramatically impact the visual balance and presence for each tab item.
It can often be hard to identify the meaning of icon-only tabs. An icon-only tab should always show a tooltip displaying the label on hover.
Vertical tabs can be used as an anchor link experience when displaying shortcuts to sections of content on a single page. Rather than exposing a new tab view, the tab items can link to an on-page anchor. List your tab items in the order they appear within the content. Do not use horizontal tabs for this adaptation.
For RTL (right-to-left) languages, the layout of the horizontal tabs is mirrored. The tabs are right-aligned and their order is reverse.
For RTL (right-to-left) languages, the layout of the vertical tabs is mirrored. The divider and selection indicator should be placed on the right, as they are meant to visually anchor the text labels.
There are two possible behaviors for manipulating tabs with the keyboard: manual or automatic activation. Typically, manual activation of tabs is only necessary when content cannot be displayed instantly (i.e., not all the panel content is present in the DOM.) For additional guidance, see Deciding When to Make Selection Automatically Follow Focus.
Option 1: Manual activation
Key | Interaction |
---|---|
Tab | Moves focus into the tabs component and places focus on the selected tab item. If the tabs component is already in focus, moves focus to the next element in the page tab sequence. |
Left Arrow | Moves focus to the previous tab item. If focus is on the first tab item, moves focus to the last tab item. |
Right Arrow | Moves focus to the next tab item. If focus is on the last tab item, moves focus to the first tab item. |
Space or Enter | Activates the tab item in focus. |
Home (optional) | Moves focus to the first tab item. |
End (optional) | Moves focus to the last tab item. |
Delete (optional) | When deletion is allowed, Delete closes the currently activated tab item. If any tab items remain, moves focus to the tab item following one that was closed. |
Option 2: Automatic activation
Key | Interaction |
---|---|
Tab | Moves focus into the tabs component and places focus on the selected tab item. If the tabs component is already in focus, moves focus to the next element in the page tab sequence. |
Left Arrow | Moves focus to the previous tab item and automatically activates it. If focus is on the first tab item, moves focus to the last tab item. |
Right Arrow | Moves focus to the next tab item and automatically activates it. If focus is on the last tab item, moves focus to the first tab item. |
Home (optional) | Moves focus to the first tab item and automatically activates it. |
End (optional) | Moves focus to the last tab item and automatically activates it. |
Delete (optional) | When deletion is allowed, Delete closes the currently activated tab item. If any tab items remain, moves focus to and activates the tab item following one that was closed. |
A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.
Tabs in Spectrum for Adobe Express use indigo accents for emphasized selection. This theme also uses a different icon set.
Date | Number | Notes |
---|---|---|
Jun 07, 2023 | 6.0.1 |
|
Apr 06, 2022 | 6.0.0 |
|
Mar 15, 2022 | 5.3.0 |
|
Oct 17, 2019 | 5.2.0 |
|
Aug 22, 2019 | 5.1.0 |
|
Jul 31, 2019 | 5.0.1 |
|
Apr 20, 2019 | 5.0.0 |
|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
UI language and information design considerations have been incorporated into component design.
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.
Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.
Component is included in the Spectrum for Adobe XD plugin.