Tabs

JSThis component requires JavaScript.

Component status:Ready

Tabs organize related content, allowing the user to switch between groups of content on the same page.

Tabs are used to navigate among groups of content that are related and at the same level of hierarchy. For example, tabs can display driving directions “from north”, “from east”, “from south” and “from west”. They contain a minimum of two tabs and one tab is active at a time.

Tabs are effective in shortening pages by reducing scrolling. Users decide if they want to read the content by clicking through tabs or deferring it for later. For this reason, it is ideal for details that are not critical to the user for general understanding of the content.

Keep in mind that even though Tabs shorten a page and reduces scrolling, it increases the interaction cost by requiring users to decide if the tab might contain information they are looking for.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

<div class="bux-tabpanel">
  <ul
    class="bux-tabpanel__tabs"
    role="tablist"
    aria-label="An accessible tabpanel example"
    tabindex="-1"
  >
    <li class="bux-tabpanel__button" role="presentation">
      <button
        id="bux-tabpanel__tab--1"
        class="bux-tabpanel__tab"
        role="tab"
        aria-selected="true"
        aria-controls="bux-tabpanel__panel--1"
      >
        Tab one
      </button>
    </li>
    <li class="bux-tabpanel__button" role="presentation">
      <button
        id="bux-tabpanel__tab--2"
        class="bux-tabpanel__tab"
        role="tab"
        aria-selected="false"
        aria-controls="bux-tabpanel__panel--2"
        tabindex="-1"
      >
        Tab two
      </button>
    </li>
    <li class="bux-tabpanel__button" role="presentation">
      <button
        id="bux-tabpanel__tab--3"
        class="bux-tabpanel__tab"
        role="tab"
        aria-selected="false"
        aria-controls="bux-tabpanel__panel--3"
        tabindex="-1"
      >
        Tab three has longer text
      </button>
    </li>
    <li class="bux-tabpanel__button" role="presentation">
      <button
        id="bux-tabpanel__tab--4"
        class="bux-tabpanel__tab"
        role="tab"
        aria-selected="false"
        aria-controls="bux-tabpanel__panel--4"
        tabindex="-1"
      >
        Tab four
      </button>
    </li>
  </ul>
  <div
    id="bux-tabpanel__panel--1"
    class="bux-tabpanel__panel"
    role="tabpanel"
    aria-labelledby="bux-tabpanel__tab--1"
    tabindex="0"
  >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div
    id="bux-tabpanel__panel--2"
    class="bux-tabpanel__panel"
    role="tabpanel"
    aria-labelledby="bux-tabpanel__tab--2"
    tabindex="0"
    hidden="hidden"
  >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div
    id="bux-tabpanel__panel--3"
    class="bux-tabpanel__panel"
    role="tabpanel"
    aria-labelledby="bux-tabpanel__tab--3"
    tabindex="0"
    hidden="hidden"
  >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div
    id="bux-tabpanel__panel--4"
    class="bux-tabpanel__panel"
    role="tabpanel"
    aria-labelledby="bux-tabpanel__tab--4"
    tabindex="0"
    hidden="hidden"
  >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

{% set panels = '' %}
<div class="bux-tabpanel">
	<ul class="bux-tabpanel__tabs" role="tablist" aria-label="{{ title }}" tabindex="-1">
		{% for item in items %}
			{% set isTabSelected = (loop.first) ? true : false %}
			{% set tabTabIndex = (isTabSelected) ? '' : 'tabindex="-1"' %}
			{% set tabId = 'bux-tabpanel__tab--' ~ item.id %}
			{% set panel = '' %}
			{% set panelId = 'bux-tabpanel__panel--' ~ item.id %}
			{% set panelVisibility = (isTabSelected) ? '' : 'hidden="hidden"' %}
			<li class="bux-tabpanel__button" role="presentation">
				<button id="{{ tabId }}" class="bux-tabpanel__tab" role="tab" aria-selected="{{ isTabSelected }}" aria-controls="{{ panelId }}" {{ tabTabIndex }}>
					{{ item.title }}
				</button>
			</li>
			{% set panel %}
			<div id="{{ panelId }}" class="bux-tabpanel__panel" role="tabpanel" aria-labelledby="{{ tabId }}" tabindex="0" {{panelVisibility}}>
				{{ item.content }}
			</div>
			{% endset %}
			{% set panels = panels ~ panel %}
		{% endfor %}
	</ul>
	{{ panels }}
</div>

Usage

Dos

• Use when there are several pieces of content related to a single topic, but the user only needs to read some of them (i.e. driving directions from different locations)
• Use content that is closely related and at the same level of hierarchy
• Consider Tabs as a complementary component to the main content (likely above it)
• Write clear and concise tab labels
• Use a minimum of two tabs. In most scenarios, use two to six tabs

Don’ts

• Don’t use for critical information in Tabs that might be overlooked by the user
• Don’t use to reduce page scrolling; rely on nested Headings or Accordions
• Don’t use as to navigate to different areas; rely on Menus
• Don’t use for comparing content; use a Table, Accordion or different component

Implementation notes

Each tab and panel pair must be associated with each other by the following properties:

Tab

• id="TAB_ID" — a unique identifier for the tab element
• role="tab" — tells assistive technologies that this element behaves like a tab
• aria-controls="PANEL_ID" — tells assistive technologies that this element controls another element
• aria-selected="true|false" — tells assistive technologies that this element has been activated or not
• tabindex="-1" — removes non-active tabs from tab order so next tab goes to the active panel

Panel

• id="PANEL_ID" — a unique identifier for the panel element
• role="tabpanel" — tells assistive technologies that this element behaves like a tabpanel
• aria-labelledby="TAB_ID" — tells assistive technologies that this element is labeled by another element
• tabindex="0" — places the panels into the tab order
• hidden — hides all non-active panels

Each tab and panel must have an unique ID. If you are using multiple tabpanels on the same page you'll want to add a unique identifier to each tab and panel.

Delay attribute

There is an optional attribute that you can add to the main <div> element.

• data-delay — By adding a delay to the tabpanel each key stroke within the tablist will be delayed 300ms

<div class="bux-tabpanel" data-delay></div>

Accessibility

• Example of Tabs with Automatic Activation

Keyboard support

Key	Function
Tab	When focus moves into the tab list, places focus on the active tab element. When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the tabs element.
Right Arrow	Moves focus to the next tab. If focus is on the last tab, moves focus to the first tab. Activates the newly focused tab.
Left Arrow	Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Activates the newly focused tab.
Home	Moves focus to the first tab and activates it.
End	Moves focus to the last tab and activates it.

References

• Tabs, Used Right