Tabs

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

<div class="tabs">
  <ul class="tab__list">
    <li class="tab__item">
      <a class="tab__tab tab__tab--link" href="#-unique-id-tab1">Tab 1 Link</a>
    </li>
    <li class="tab__item">
      <a class="tab__tab tab__tab--link" href="#-unique-id-tab2">Tab 2 Link</a>
    </li>
  </ul>
  <div class="tab__panel" id="-unique-id-tab1">
    <h2>Tab 1 content (html)</h2>
              <p>Lorem ipsum esse in voluptate esse dolore proident dolore voluptate aliquip in ipsum dolor. Eiusmod eiusmod laborum culpa Lorem laboris exercitation ex laborum deserunt. Do irure nulla laborum ipsum anim laborum. Amet et Lorem labore adipisicing tempor exercitation aliquip ullamco nulla veniam labore labore nostrud ea. Ullamco nulla in anim dolor velit tempor est aute commodo incididunt ad irure. Anim exercitation eu in enim Lorem nulla. Exercitation ad et do labore nulla sit.</p>
  </div>
  <div class="tab__panel" id="-unique-id-tab2">
    <p>Tab 2 content (text)</p>
  </div>
</div>

{% from "tabs/macro.njk" import aspTabs %}

{{ aspTabs({
  uniqueID: "-unique-id-",
  rows: [
    {
      linkText: "Tab 1 Link",
      content: {
        title: "Tab 1 Title",
        html: '<h2>Tab 1 content (html)</h2>
          <p>Lorem ipsum esse in voluptate esse dolore proident dolore voluptate aliquip in ipsum dolor. Eiusmod eiusmod laborum culpa Lorem laboris exercitation ex laborum deserunt. Do irure nulla laborum ipsum anim laborum. Amet et Lorem labore adipisicing tempor exercitation aliquip ullamco nulla veniam labore labore nostrud ea. Ullamco nulla in anim dolor velit tempor est aute commodo incididunt ad irure. Anim exercitation eu in enim Lorem nulla. Exercitation ad et do labore nulla sit.</p>'  
      }
    },
    {
      linkText: "Tab 2 Link",
      content: {
        title: "Tab 2 Title",
        text: 'Tab 2 content (text)'
      }
    }
  ]
}) }}

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

How it works

The tabs component consists of tabs and panels. Tabs can either be links or buttons, and panels are sections of the page which can be hidden/revealed. By default all panel sections are shown and the tab links allow visitors to jump to those sections.

The tabs component uses JavaScript. When JavaScript is not available, users will see the tabbed content on a single page, in order from first to last, with a table of contents that links to each of the sections. This is also how the component currently behaves on small screens.

By default the first panel section is shown, unless the visitor opens the page with a hash within the url that matches one of the panel ids. The selected tab will match the panel showing and url.

To interact with the tabs, the visitor can either click on the tab or they can tab into the tabs list using the “tab” key. The “home”, “left”, “right” and “end” keys can be used to select a tab. Using either the “enter” or “space” keys will open the corresponding panel.

When moving between tabs, the URL gets updated with a fragment (#id-of-the-tab) corresponding to the current tab’s id attribute’s value.

If the tab’s name is “Details” then the fragment could be #tab_details.

Because of this feature, pressing the browser’s ‘back’ button should navigate back to the previous tab.

Aria labelling is added and is responsive to the visitors’ interactions.

An optional heading can be added with corresponding aria-labelledby attribute for the list element.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Published 3 May 2024
Last updated 11 September 2024