Skip to main content


JSThis component requires JavaScript.
Component status:Beta
A TabPanel organizes 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.

A TabPanel is 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 a TabPanel shortens 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.


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.
<div class="bux-tabpanel">
<div class="bux-tabpanel__tabs--scrollable">
<button aria-hidden="true" aria-label="scroll left" tabindex="-1" type="button" class="bux-tabpanel__overflow-nav-button bux-tabpanel__overflow-nav-button--left">
<i class="icon icon-chevron-left"></i>
<ul class="bux-tabpanel__tabs" role="tablist" aria-label="An accessible tabpanel example">
<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
<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
<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
<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 aria-hidden="true" aria-label="scroll right" tabindex="-1" type="button" class="bux-tabpanel__overflow-nav-button bux-tabpanel__overflow-nav-button--right">
<i class="icon icon-chevron-right"></i>
<div id="bux-tabpanel__panel--1" class="bux-tabpanel__panel" role="tabpanel" aria-labelledby="bux-tabpanel__tab--1" tabindex="0">
<div id="bux-tabpanel__panel--2" class="bux-tabpanel__panel" role="tabpanel" aria-labelledby="bux-tabpanel__tab--2" tabindex="0" hidden="hidden">
<div id="bux-tabpanel__panel--3" class="bux-tabpanel__panel" role="tabpanel" aria-labelledby="bux-tabpanel__tab--3" tabindex="0" hidden="hidden">
<div id="bux-tabpanel__panel--4" class="bux-tabpanel__panel" role="tabpanel" aria-labelledby="bux-tabpanel__tab--4" tabindex="0" hidden="hidden">




  • 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 an TabPanel 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’t use for critical information in a TabPanel 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:


  • 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


  • 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>


Keyboard support#

  • 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 tabpanel 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.
HomeMoves focus to the first tab and activates it.
EndMoves focus to the last tab and activates it.