Components

Tabs

Horizontal or vertical tab menu for navigating between tabbed content. For information on a version of this tabs component that's available in the UIB toolbox, see documentation for now-uxf-tab-set.

Overview

  • Available since: Orlando
  • A11Y: Not compliant

This component is available for you to include in JavaScript code when creating custom components, but it only includes horizontal display. Use the UI Builder tabs component to display your tabs vertically or horizontally. For information on a version of this tabs component that's available in the UIB toolbox, see documentation for now-uxf-tab-set.

Tabs are a navigation component used to organize content into multiple sections or views within the same interface. Each tab represents a distinct category or topic, and users can quickly switch between different sections without the need for scrolling or loading new pages.

ServiceNow link
Tabs code documentation

UIB and developer guidance

Figma link
Tabs Figma component

Horizon components and styles library

Loading playground

When to use

Use tabs to organize content or functionalities into distinct sections within the same context. Tabs reduce clutter and provide visual hierarchy.

When not to use

Don’t use tabs when there is only one section of content. This can introduce unnecessary complexity to the interface. Additionally, don’t use tabs for sequential steps or processes. Instead, use a wizard or stepper component to guide users through a series of actions.

Anatomy

Learn about the individual parts of tabs.

Horizontal tabs

Tab Anatomy
  1. Selected indicator: Underline that identifies which tab is currently selected; the underline appears under the label
  2. Label: Text used to identify the associated content; the label can be text, an icon, or both
  3. Data: Value displayed next to the label; the value is always contained within parentheses
  4. Container: The designated area for tabs; the width determines when to trigger the overflow ("More" tab)
  5. Tab base: Visual distinction between the content and tab container

Vertical tabs

Tab Anatomy
  1. Selected indicator: Vertical line that identifies which tab is currently selected; it appears to the at the beginning of the label
  2. Label: Text used to identify the associated content; the label can be text, an icon, or both
  3. Container: Container that holds all tab content
  4. Data: Value displayed opposite the label; the value is always contained within parentheses

Subcomponents

See usage guidance for presence icon

Usage

Use tabs in the main navigation of a product or site to help users identify sections of content at a glance.

Layouts

For in-page layouts, use tabs to help users switch between different groupings of content on the same page.
Tabs should always appear on the top of a view layout and not on the side or the bottom of a view layout. Tabs may be oriented flush left or justified to take up available space. See the responsive section for more details.

Variants

Learn about the attributes of tabs.

Sizes

Tabs have two sizes: small (sm) and medium (md).

Small

Use the small size for experiences that have a dense UI and use small variants of text, icons, and components.

Tab Configuration Iconic

Medium

Medium is the default size for the tabs component. Use the medium-size tabs in Workspace and Portal experiences or for experiences that are not constrained by dense UI and have more space available.

Tab Configuration Iconic

Configurations

Learn how to customize tabs by configuring the available properties.

Tab items

You can specify your tab properties, such as the label or icon that's displayed in your tabs.

Text

You can label tabs with only text.

Tab Configuration Icon+Text

Text with an icon

You can also label tabs with text and an icon to make the tabs more scannable. The one exception is the "More" tab, which won't contain an icon. See the "Responsive behaviors" section for additional clarification.
The presence icon is treated as an icon.

Tab Configuration Icon+Text

Iconic

You can also label tabs with only an icon. Use this tab type when space is limited in your design. Icons require less translation than text, but different cultures may misinterpret their meaning. Consider the internationalization guidelines before choosing an icon for a tab.

Tab Configuration Iconic

Default tab

You can configure the tab that is selected by default when the page loads. You can make the default tab selection static by assigning a specific tab; or dynamic, by binding it to data resources.

Tab labels

You can configure the size of your tab labels (small or medium). You can also hide the tab labels and use icons instead.

Tab CSS styles

You can apply custom CSS to the tab bar or container.

ARIA attributes

You can configure the ARIA attributes for the tabs component.

Tab position

You can configure tabs to display horizontally across the top of the content or vertically at the beginning or end of the content. When you select vertical tabs, you can specify the spacing between tabs and allow users to collapse the tabs to save space.

Horizontal tabs

You can configure the maximum width and enable the tabs to be spaced evenly (fixed width) or adjust dynamically. You can also choose to hide the tab base to allow for more white space in your design.

Tab Configuration Iconic

Vertical tabs

You can configure the tab collapsing behaviors and add inline padding to vertical tab buttons.

Design recommendations

Learn how to use tabs in your design.

Tab Do
Do

All tabs are labeled with text only. Using consistent tab types creates a clean look with equal visual weight.

Tab Don't
Don’t

This design uses all three tab types. This inconsistency creates visual noise and an inaccurate hierarchy.

Tab Do
Do

Ensure there is enough padding around the tab labels to accomodate the longest tab label.

Tab Don't
Don’t

This design doesn’t contain enough padding, so the longest tab label is cut off.

Tab Do
Do

Keep the tab label short and concise.

Tab Don't
Don’t

Don't be over-descriptive with tab labels.

Tab Do
Do

Use dynamic tabs when the parent container is very wide. This visually groups tabs for easy scanning.

Tab Don't
Don’t

Don't use tabs with a fixed width when the parent container is very wide. This creates large tabs and too much space between the labels.

UI text guidelines

These are some recommendations for using text within tabs:

  • Keep tab labels short so that they fit in the allotted space and so that people can scan them 
  • The label should set an expectation of what the person can view when they select it 
  • If you have multiple tabs, consider formatting the labels the same way for consistency 
    • For example, your tabs could be “Apps,” “Files,” and “Update sets” which are all objects

     

  • When writing the labels, always consider the context and how they relate to the parent page, section, or container. Remember that the tabs divide and group different views and content. 
    • For example, “Details,” “SLAs,” and “Tasks” are groups of content related to a record

Behavior

Learn how tabs behaves when the display changes or a user interacts with the component.

States

Tabs has the following states: default, hover, active, focus, selected, and disabled.

State Horizontal Vertical
Default now-tabs now-tabs

Responsive behavior

Learn how tabs responds to changes in a container or display.

Horizontal tab overflow

In certain circumstances, all available tabs might not fit in the tab container. When this happens, an overflow tab (the "More" option) appears and contains all additional tabs. The overflow menu format mirrors the tab type except for icon-only tabs. The overflow items for icon-only tabs will display the icon with a text label (and not just the icon).

Note: The overflow tab is labeled with text or an icon, but never both.

Tab Overflow Formatting

Remember to leave enough space next to the overflow tab so that the longest text label can still appear.

Tab Overflow Menu Width

Allow enough space in your design so that the longest list item in the dropdown panel can replace the overflow tab label (the “More” label)

Dynamic overflow alignment

Tabs relocate to the “More” overflow menu as the tab container shrinks in size.

Tab Layout Flush Left
Tab Layout Flush Left

Justified overflow alignment

Starting from the right, tabs relocate one by one to the "More" tab if they don't meet the minimum width requirement.

Tab Layout Flush Left
Tab Layout Flush Left

Vertical tabs overflow

When the user selects a tab from the overflow menu, the overflow menu will close and the selected tab will take over the position of the last tab in the tab set.

Tabs Usability RTL

The order of the tabs is maintained within the adjusted overflow menu.

Tabs Usability RTL

Truncation

If the text label and count are displayed, both are truncated at the same time when the container size shrinks. Once the minimum width is reached for the text label and count, any tab that does not fit within the container width begins moving into the overflow menu. To denote the presence of a count, truncation is not inclusive of the parentheses.
Minimum width of the text label for both md and sm size tabs is 8px (sm).

Tabs Usability RTL

The same truncation behavior occurs when only the count is displayed and the text label is hidden.

Tabs Usability RTL

Interactions

Learn how tabs responds when a user interacts with it.

Usability

Tabs complies with all internationalization and accessibility requirements.

Internationalization

When the display translates to a right-to-left (RTL) language, the labels and caret flip and align on the right.

Tabs Usability RTL

An example of how tabs display in a right-to-left (RTL) language.

Accessibility

Learn how to access the actionable elements of tabs with these keyboard interactions and screen readers.

Keyboard interactions

Learn about keyboard interactions for the tabs component.

With focus on tab:
  • Shift + tab: Moves focus out of entire tab set to previous element
  • Tab: Moves focus out of entire tab set to next element
  • Arrow keys: Skip over disabled tabs, but they can still be reached via VoiceOver cursor (which announces them as "dimmed")
    • Left arrow: Moves focus to the previous tab and automatically activates it; if focus is on the first tab, the left arrow moves focus to the last tab (this key cycles through tabs regardless of whether they are in the regular tab list or in the overflow dropdown menu)
    • Right arrow: Moves focus to the next tab and automatically activates it; if focus is on the last tab, the right arrow moves focus to the first tab (this key cycles through the tabs regardless of whether they are in the regular tab list or in the overflow dropdown menu)
  • Enter or space: Activates the tab in focus
  • Home: Moves focus to the first tab
  • End: Moves focus to the last tab
  • Escape: Dismisses the tooltip
With focus on overflow tab:
  • Down arrow or Enter or Space: Opens the overflow menu
  • Shift + tab: Moves focus to the last tab that was previously selected
  • Tab: Moves focus out of the overflow tab to the next element
With focus on overflow menu:
  • Up arrow and down arrow: Moves focus up and down items in the overflow menu
  • Enter or space: Selects the menu item in focus and adds it to the tab bar in accordance with the overflow behavior
  • Tab or escape: Exits the overflow menu

Screen readers

The element that serves as the container for the set of tabs has the role tab list.

  • Each element that serves as a tab has role tab and is contained within the element with role tab list; each element that contains the content panel for a tab has role tab panel
  • If the tab list has a visible label, the element with role tab list has aria-labelledby set to a value that refers to the labeling element; otherwise, the tab list element has a label provided by aria-label
  • Each element with role tab has the property aria-controls referring to its associated tab panel element
  • The active tab element has the state aria-selected set to true and all other tab elements have it set to false
  • Each element with role tab panel has the property aria-labelledby referring to its associated tab element
  • If a tab element has a pop-up menu, it has the property aria-haspopup set to either menu or true
  • The default value of aria-orientation for a tab list element is horizontal