Spectrum

Version 6.0.1

Tabs

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.

Table of contents#

Anatomy
Options
Behaviors
Usage guidelines
Internationalization
Keyboard interactions
Theming
Changelog
Design checklist

Anatomy#

Options#

Label#

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#

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.

Selected#

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.

Disabled#

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.

Table of options: tab item#

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

Orientation#

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.

Size#

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.

Key example showing tabs in 2 densities: regular and compact with labels, Your files (selected), Shared with you, Libraries. The compact tabs has less space between the labels and the horizontal divider below them.

Density#

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.

Fluid#

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.

Quiet#

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.

Key example showing emphasized tabs, where selected tab item, label Your files, is blue instead of gray.

Emphasis#

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.

Alignment#

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.

Key example of tabs with first tab item selected. Labels, Your files, Shared with you, Libraries.

Selected item#

Only one tab item can be selected at any given time. This property changes an individual tab item’s selected state.

Keyboard activation#

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.

Table of options: 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

Behaviors#

Animation#

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.

Tab overflow#

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.

Text overflow#

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.

Usage guidelines#

Too many tabs#

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.

Key example showing the correct use of horizontal and vertical tabs with many tap items. In the first example the last tab item is partially hiding behind a divider that features a chevron icon pointing to the right.
The second example displays a single tap item with a downwards pointing chevron on the right side. Three tab items are placed below in a container.

tabs_usage-guidelines_too-many-tabs_dont@2x_6JgxX7QngWzvOpP1yb0JN5.png

Don't use tabs for varying levels of importance#

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.

Nested tabs#

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.

Key example showing the correct levels of nested tabs. A sidebar navigation on the left is displayed underneath the main three horizontal tab items.

Key example showing the incorrect levels of nested tabs. No clear hierarchy is visible as both tap experiences are aligned in the horizontal option.

Use icons consistently#

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.

Use tooltips for icon-only tabs#

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.

Key example showing the correct use of tabs as an on-page navigation. A vertical tab navigation with three tab items is placed below the title "on this page". The first tab item is selected.

Internationalization#

Key example showing horizontal tabs. The first tab starts from the right side of the tab divide, the two tabs tabs follow in the same right-to-left direction.

RTL horizontal tabs#

For RTL (right-to-left) languages, the layout of the horizontal tabs is mirrored. The tabs are right-aligned and their order is reverse.

Key example showing the usage of vertical tabs. The three tabs are aligned on the left side of the tab divider.

RTL vertical tabs#

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.

Keyboard interactions#

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.

Theming#

A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.

Spectrum for Adobe Express#

Tabs in Spectrum for Adobe Express use indigo accents for emphasized selection. This theme also uses a different icon set.

Changelog#

Date	Number	Notes
Jun 07, 2023	6.0.1	Migrated to latest token system
Apr 06, 2022	6.0.0	Updated all colors to 6.0.0
Mar 15, 2022	5.3.0	Added size option
Oct 17, 2019	5.2.0	Added density option (regular/compact) Added emphasis option (emphasized/not emphasized) Added alignment option (start/center) Added fluid height option for horizontal tabs
Aug 22, 2019	5.1.0	Added text overflow behavior
Jul 31, 2019	5.0.1	Updated text to use sentence case
Apr 20, 2019	5.0.0	This component is now individually versioned (individual versions of existing components start at 5.0.0)

Design checklist#

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Accessible contrast for text

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).

Accessible contrast for UI components

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).

Content design

UI language and information design considerations have been incorporated into component design.

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

Generated UI kit

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.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.

Side navigation

Tag