When used correctly, tabs create clarity and reduce clutter by selectively showing content. Many pages within the suite contain a large amount of content. Tabs can help break up that content, and reduce visual real estate, allowing the user to contextually unearth the information they need.

🚧 Under construction

This component is under active development. If you need this component for your project, create an issue in the GitHub repo.


Provides either page-level or inline tabbed experiences within Arc XP.

#Component Structure

Tab structure
  1. Active tab
  2. Inactive tab


Tabs should be used when an area within the interface contains a variety of content or is becoming cluttered and the displayed content can be grouped into logical sections. The information that is hidden within tabs should not be critical, or prevent the user from moving forward. With the information architecture in mind, there are two levels for placing tabs in an interface:
  • Page-level tab navigation
  • Inline tabs

#Page-level tab navigation

Page-level tabs When tabs are used to create a page navigation within an experience, a page-level tab navigation is the recommended approach. This implementation has optional borders, to help further create separation between navigation and page content. Generally, as the user clicks through these page-level tabs, the URL is updated.

#Inline tabs

Inline tabs This pattern is for when tabs are useful on a page, but are not integral to way-finding. Generally, inline tabs swap content out without changing the page’s URL.

#Tab sizes

Tab sizes Inline tabs are available in three different sizes: small, medium, and large.

#Dark mode

Tabs dark mode Tabs are also supported in dark mode.

#Accessibility considerations

Copyright 2021 Arc XP