ASP Digital Design System

Tabs

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

Open this example in a new tab: tabs

<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>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
title string or false (boolean) The title for the tabs component. Default values are false (boolean) or null.
uniqueID string or false (boolean) A unique ID that prepends to ids within the tab component to ensure tab ids are unique. Default values are alphanumeric characters with hyphens and/or underscores [a-zA-Z0-9-_], false (boolean) or null.
rows object Required. Object of each tab. See rows.

Options for rows

Name Type Description
linkText string Required. The text for the tab link.
content array Required. The tab panel content. See content.

Options for content

Name Type Description
html string Required. HTML for the tab panel content. If 'html' is provided, the 'text' parameter will be ignored.
text string Required. Text for the tab panel content. If 'html' is provided, the 'text' parameter will be ignored. 
{% 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)'
      }
    }
  ]
}) }}
Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
title string or false (boolean) The title for the tabs component. Default values are false (boolean) or null.
uniqueID string or false (boolean) A unique ID that prepends to ids within the tab component to ensure tab ids are unique. Default values are alphanumeric characters with hyphens and/or underscores [a-zA-Z0-9-_], false (boolean) or null.
rows object Required. Object of each tab. See rows.

Options for rows

Name Type Description
linkText string Required. The text for the tab link.
content array Required. The tab panel content. See content.

Options for content

Name Type Description
html string Required. HTML for the tab panel content. If 'html' is provided, the 'text' parameter will be ignored.
text string Required. Text for the tab panel content. If 'html' is provided, the 'text' parameter will be ignored. 
{% 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.

Development criteria Status
WCAG 2.2 compliant Not started
WCAG 2.1 compliant Completed
HTML / Nunjucks version Completed
Figma version Not started
M365 versions Not started
Documentation In progress

Published 3 May 2024
Last updated 11 September 2024