Tabs

The tabs component lets users navigate between related sections of content, displaying one section at a time.

When to use this component

Tabs can be a helpful way of letting users quickly switch between related information if:

• your content can be usefully separated into clearly labelled sections
• the first section is more relevant than the others for most users
• users will not need to view all the sections at once

When not to use this component

Do not use the tabs component if the total amount of content the tabs contain will make the page slow to load. For this reason, do not use the tabs component as a form of page navigation.

Tabs hide content from users and not everyone will notice them or understand how they work.

Do not use tabs if your users might need to:

• read through all of the content in order, for example, to understand a step-by-step process
• compare information in different tabs - having to memorise the information and switch backwards and forwards can be frustrating and difficult

Test your content without tabs first. Consider if it’s better to:

• simplify and reduce the amount of content
• split the content across multiple pages
• keep the content on a single page, separated by headings
• use a table of contents to let users navigate quickly to specific sections of content

Decide between using tabs, accordion and details

The Tabs component, accordion and details all hide sections of content which a user can choose to reveal. Avoid using any of these components within one another.

If you decide to use one of these components, consider if:

• the user does not need to view more than one section at a time – consider using tabs
• the user needs to switch quickly between sections – tabs can show content without pushing other sections down the page, unlike accordions
• there are many pieces of content – tabs can fit fewer sections as they’re arranged horizontally, unlike accordions which are arranged vertically
• there’s only one or two pieces of short, less important content – the details component is more suitable as it’s visually smaller and less prominent than an accordion or tabs

General structure

The component requires the following structure:

• A container with the class kth-tabs
• A ul element to hold the list of tabs
• Each tab as an li element containing a button with role="tab"
• Use the class kth-tabs__item for each tab button
• Add the class active to the currently selected tab to underline it
• Use the hidden class to hide inactive tab panes
• Toggle active and hidden classes via JavaScript based on user interaction

HTML and CSS

<div class="kth-tabs">
  <ul>
    <li>
      <button id="tab-1" class="kth-tabs__item active" role="tab">Tab 1</button>
    </li>
    <li><button id="tab-2" class="kth-tabs__item" role="tab">Tab 2</button></li>
    <li><button id="tab-3" class="kth-tabs__item" role="tab">Tab 3</button></li>
  </ul>
</div>

<div id="content-tab-1" class="kth-tabs__pane" role="tabpanel">
  Content for Tab 1
</div>
<div id="content-tab-2" class="kth-tabs__pane hidden" role="tabpanel">
  Content for Tab 2
</div>
<div id="content-tab-3" class="kth-tabs__pane hidden" role="tabpanel">
  Content for Tab 3
</div>

@use "@kth/style/scss/components/tabs.scss";

JavaScript Functionality

function onTabClick() {
  const tabButtons = document.querySelectorAll(".kth-tabs__item");
  const tabContents = document.querySelectorAll(".kth-tabs__pane");

  tabButtons.forEach((button) => {
    button.addEventListener("click", () => {
      const target = event.currentTarget;
      const tabId = target.id;
      const contentId = `content-${tabId}`;

      tabButtons.forEach((btn) => btn.classList.remove("active"));
      target.classList.add("active");

      tabContents.forEach((content) => {
        content.classList.toggle("hidden", content.id !== contentId);
      });
    });
  });
}