Javascript is not enabled.

Javascript must be enabled to use this site. Please enable Javascript in your browser and try again.

Design System - IN BETA

Getting Started            Components            Presets             Templates

Tabbed

Tabbed interfaces are a way of navigating between multiple panels, reducing clutter and fitting more into a smaller space. Learn from UX experts from N/Ng by reading, "Tabs Used Right," from Jakob Nielsen. Tabs are everywhere, but do you use them properly? Distinguish between types of tabs, design them for visual clarity, and structure their content for usability.

Editor to Copy/Paste
Training
Figma Design

Default Tabbed - Do Not Use

When you first add Tabbed Component, tabs appear unstyled like this. Do not use this variation. Remember to set the container that appears inside the tab to Responsive Grid, or else you won't be able to resize things inside of it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget eros felis. Donec mi ipsum, pharetra vitae felis pulvinar, elementum cursus nulla. Phasellus pretium, diam in fringilla mollis, lectus est sodales lacus, in posuere nisl diam quis nisl. Sed posuere laoreet lacus. Duis enim purus, tincidunt eu tempus ac, venenatis ut felis. Pellentesque euismod risus quis orci tempor, id volutpat enim posuere. Nullam id laoreet libero, a tincidunt tortor. Proin eget faucibus libero, auctor efficitur erat. Sed scelerisque convallis diam.

Tabbed - Panel Style

This one has a grey background behind the tab links.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget eros felis. Donec mi ipsum, pharetra vitae felis pulvinar, elementum cursus nulla. Phasellus pretium, diam in fringilla mollis, lectus est sodales lacus, in posuere nisl diam quis nisl. Sed posuere laoreet lacus. Duis enim purus, tincidunt eu tempus ac, venenatis ut felis. Pellentesque euismod risus quis orci tempor, id volutpat enim posuere. Nullam id laoreet libero, a tincidunt tortor. Proin eget faucibus libero, auctor efficitur erat. Sed scelerisque convallis diam.

Tabbed - Standard Style

This one does not have a grey background behind the links and the vertical padding is tighter.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget eros felis. Donec mi ipsum, pharetra vitae felis pulvinar, elementum cursus nulla. Phasellus pretium, diam in fringilla mollis, lectus est sodales lacus, in posuere nisl diam quis nisl. Sed posuere laoreet lacus. Duis enim purus, tincidunt eu tempus ac, venenatis ut felis. Pellentesque euismod risus quis orci tempor, id volutpat enim posuere. Nullam id laoreet libero, a tincidunt tortor. Proin eget faucibus libero, auctor efficitur erat. Sed scelerisque convallis diam.

Tabbed at Bottom

This style moves the tab links below the content, instead of above it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget eros felis. Donec mi ipsum, pharetra vitae felis pulvinar, elementum cursus nulla. Phasellus pretium, diam in fringilla mollis, lectus est sodales lacus, in posuere nisl diam quis nisl. Sed posuere laoreet lacus. Duis enim purus, tincidunt eu tempus ac, venenatis ut felis. Pellentesque euismod risus quis orci tempor, id volutpat enim posuere. Nullam id laoreet libero, a tincidunt tortor. Proin eget faucibus libero, auctor efficitur erat. Sed scelerisque convallis diam.

Tabbed - Panel Style

This one has a grey background behind the tab links.

Training

Usage

The Tabbed Component allows the content author to organize page content within multiple tabs.

The editing dialogue allows the content author to define multiple tabs and set the active tab. Using the design dialogue, the template author can define which components can be added to tabs and customize the styles.

Training Video

14:58

Authoring Capability

The Tabbed component is designed to be fully responsive, ensuring a seamless experience across devices.

Some advanced components, such as the Tabbed component, may require specific consideration in the implementing project to maintain responsiveness under all conditions.

  • Container - Allows an author to name the tab.  It also powers the tab and allows an author to place any core component within the tab.
  • Tab path - N/A
  • Tab Analytics ID - This is where the tab click can be tracked by entering a data-element-id into the field.
  • Accordion Analytics ID - N/A
  • Accordian Campaign ID - N/A

 

Activity Item Drop-down - The author can determine whether the tabs are open on page load.  By default teh first tab will be open on page load. However, the author can select a tab to be open on page load. 

 

  • Label - Value of an aria-label attribute, which describes the purpose of the set of tabs.

  • Type - None leaves the tabs black with a gray background by default and should never be used.
  • Size - There are three sizes available:
    •  None - Defaults to the Small size.
    • Medium -  a little larger than the None or small
    • Small -   Smaller than the Medium size and the same as None. 
  • Mobile - Gives the author the option of selecting a Dropdown in mobile so that the Tabs appear as a drop-down for mobile view. 
  • Placement - Gives the author the option of selecting Tabs at Bottom instead of having the Tabs appear on top.