Tabs

Version 6.0.1

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.

Two horizontal tabs, labels Design, Prototype. Design tab is in active state.Two horizontal tabs, labels Design, Prototype. Design tab is in active state.
DateVersionSpectrumExpress UI KitJun 07, 20236.0.1DownloadDownloadApr 06, 20226.0.0DownloadDownloadMar 15, 20225.3.0DownloadOct 17, 20195.2.0DownloadAug 22, 20195.1.0DownloadJul 31, 20195.0.1DownloadApr 20, 20195.0.0Download

Anatomy#

Image illustrating through labels the anatomy of horizontal and vertical tab components. Tabs are separated in sections with one selected tab. The selected tab features a selection indicator. A divider line is displayed between the tab menu and the tab view.Image illustrating through labels the anatomy of horizontal and vertical tab components. Tabs are separated in sections with one selected tab. The selected tab features a selection indicator. A divider line is displayed between the tab menu and the tab view.

Options#

Key example of tab item with and without a label. Both have a settings icon using a gear metaphor. Label, Settings.

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.

Key example showing tab item with and without an icon. An icon is placed before the label, Settings.

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.

Key example showing tab item in selected and not selected states. Selected state has darker (gray 900), label, Settings.

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.

Key example of disabled tab item. Label, Settings.

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.

PropertyValuesDefault valuelabeltext / nothing–iconicon / nothingnothingis selectedyes / nonois disabledyes / nono


Key example showing horizontal orientation for tabs. Three tabs are aligned horizontally next to each other. Key example showing vertical orientation for tabs. Three tabs are aligned vertically, the first tab placed on the top with second tab in the middle and the last tab in the bottom. The divider is aligned to the left side of all the three tabs.

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.

Key example of four size options for tabs, including small, medium, large, and extra-large. All sizes show two tabs. First tab is selected, label Your files. Second tab is not selected, label Shared with you.

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.

Key example of horizontal tabs with fluid height. Labels, Your files (selected), Shared with you, Libraries.

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.

Key example of default and quiet horizontal tabs. Quiet tabs have no horizontal divider below the tab items.

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.

Key example of tabs alignment: start and center. Start alignment is left-aligned to the container. Center alignment is center-aligned to the container.

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.

PropertyValuesDefault valueorientationhorizontal / verticalhorizontalsizesmall / medium / large / extra-largemediumdensityregular / compactregularis fluidyes / no

This overides density and is only applicable to horizontal tabs.nois quietyes / nonois emphasizedyes / nonoalignmentstart / centerstartselected item(list of available items)–keyboard activationmanual / automaticmanual

Behaviors#

Animation displaying the switching between tab items.

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.

Animation displaying the overflow behavior for tabs for narrow and wide viewports.

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.

Key example showing the text overflow behavior for tab items.

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.

do
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.
dont
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.

dont
Key example showing incorrect level of importance. Horizontal tabs Profile, Create, Settings and Privacy are not of equal importance.

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.

do
Key example showing the correct levels of nested tabs. A sidebar navigation on the left is displayed underneath the main three horizontal tab items.
dont
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.

dont
Key example showing an inconsistent use of icons in tabs. The first and last tab item feature an icon but the second tab item is missing an icon.

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.

do
Key example of correct tooltip usage with tabs that only have icons. Tabs component with 4 tab items, with icons for Home, Tag, Comments, Settings. The tab item for Comments has mouse hovered with tooltip labelled Comments.

On-page navigation#

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.

do
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

KeyInteractionTabMoves 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 ArrowMoves focus to the previous tab item. If focus is on the first tab item, moves focus to the last tab item.Right ArrowMoves focus to the next tab item. If focus is on the last tab item, moves focus to the first tab item.Space or EnterActivates 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

KeyInteractionTabMoves 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 ArrowMoves 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 ArrowMoves 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.

Key example showing tabs in the Spectrum for Adobe Express theme. 3 emphasized tabs, labels Your files, Shared with you, Libraries. Selected tab item, label Your files, is in indigo.

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#

DateNumberNotesJun 07, 20236.0.1
  • Migrated to latest token system
Apr 06, 20226.0.0
  • Updated all colors to 6.0.0
Mar 15, 20225.3.0
  • Added size option
Oct 17, 20195.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, 20195.1.0
  • Added text overflow behavior
Jul 31, 20195.0.1
  • Updated text to use sentence case
Apr 20, 20195.0.0
  • This component is now individually versioned (individual versions of existing components start at 5.0.0)

Design checklist#

check

All interactive states

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

check

All color themes

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

check

All platform scales

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

check

Accessible use of color

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

check

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

check

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

check

Content design

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

check

Defined options

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

check

Defined behaviors

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

check

Usage guidelines

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

unchecked

Writing guidelines

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

check

Internationalization guidelines

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

check

Keyboard interactions

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

check

Design tokens

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

check

UI kit

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

check

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.

unchecked

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.