Navigation - Tabs

Tabs let the user navigate between sections of content, showing one section at a time.

Open this default tabs example in new window
Copy default tabs code 
<section class="hs2-tabs">

  <h2 class="hs2-tabs__title hs2-u-font-size-19">Why HS2?</h2>

  <ul class="hs2-tabs__list">
    <li class="hs2-tab__list-item">
      <a href="#capacity" class="hs2-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: Capacity" data-ga-label="Show: Capacity">Capacity</a>
    </li>
    <li class="hs2-tab__list-item">
      <a href="#carbon" class="hs2-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: Carbon" data-ga-label="Show: Carbon">Carbon</a>
    </li>
    <li class="hs2-tab__list-item">
      <a href="#connectivity" class="hs2-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: Connectivity" data-ga-label="Show: Connectivity">Connectivity</a>
    </li>
  </ul>

  <section id="capacity" class="hs2-tabs__panel">
    <h3>Helping reduce overcrowding</h3>
    <p>By moving long-distance traffic from our current rail network onto HS2’s new high-speed line, we will create the extra room needed to improve local, regional and freight services.</p>
    <p><a href="https://www.hs2.org.uk/why/capacity/">HS2 adds extra capacity where it is needed most</a></p>
  </section>

  <section id="carbon" class="hs2-tabs__panel">
    <h3>Building a cleaner, greener future</h3>
    <p>All our trains will be powered by zero carbon energy from day one of services. For us, that means becoming net zero from 2035. For you, it means enjoying zero carbon high-speed travel.</p>
    <p><a href="https://www.hs2.org.uk/why/carbon/">Discover how HS2 will reach destination net zero</a></p>
  </section>

  <section id="connectivity" class="hs2-tabs__panel">
    <h3>Catalysing growth and levelling-up the country</h3>
    <p>It will act as a catalyst for growth and help level-up the country, boosting growth in the Midlands and North. Better connectivity opens-up new employment and leisure opportunity for millions of people.</p>
    <p><a href="https://www.hs2.org.uk/why/connectivity/">Discover how HS2 will upgrade our railways</a></p>
  </section>

</section>
Close default tabs code
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.

Nunjucks arguments for default tabs
Name Type Required Description
Name title Type string Required true Description The h2 level heading for the tabs section element required to give context for screen readers. Visually hidden when tabs are visible.
Name titleTag Type string Required false Description The HTML heading tag to wrap the title text in for it’s correct semantic order on the page. Will default to an h2
Name tabs Type array Required true Description An array of tabs
Name tabs[].id Type string Required false Description Sets the HTML id of the tab
Name tabs[].title Type string Required true Description The title for the tab
Name tabs[].content Type string Required true Description The contents of the tab. This can contain HTML.
Name variants Type array Required false Description Adjust the component using available variants: “details”
Name noInitialActiveTab Type boolean Required false Description Do not initially show an active tab when true.
Copy default tabs code 
{% from "tabs/macro.njk" import tabs %}

{{
    tabs({
        "title": 'Why HS2?',
        "tabs": [
            {
                "id": "capacity",
                "title": 'Capacity',
                "content": '<h3>Helping reduce overcrowding</h3>
                <p>By moving long-distance traffic from our current rail network onto HS2’s new high-speed line, we will create the extra room needed to improve local, regional and freight services.</p>
                <p><a href="https://www.hs2.org.uk/why/capacity/">HS2 adds extra capacity where it is needed most</a></p>'
            },
            {
                "id": "carbon",
                "title": 'Carbon',
                "content": '<h3>Building a cleaner, greener future</h3>
                <p>All our trains will be powered by zero carbon energy from day one of services. For us, that means becoming net zero from 2035. For you, it means enjoying zero carbon high-speed travel.</p>
                <p><a href="https://www.hs2.org.uk/why/carbon/">Discover how HS2 will reach destination net zero</a></p>'
            },
            {
                "id": "connectivity",
                "title": 'Connectivity',
                "content": '<h3>Catalysing growth and levelling-up the country</h3>
                <p>It will act as a catalyst for growth and help level-up the country, boosting growth in the Midlands and North. Better connectivity opens-up new employment and leisure opportunity for millions of people.</p>
                <p><a href="https://www.hs2.org.uk/why/connectivity/">Discover how HS2 will upgrade our railways</a></p>'
            }
        ]
    })
}}
Close default tabs code

When to use this component

Use tabs to collate facets of content within a closely related context. They provide a way for users to quickly scan across the subject areas of content.

When not to use this component

Tabs hide content from users and are not easily noticed and understood by everyone. So they should not be used if the content inside each tab is critical to the user being able to progress with their task.

Test your content considering the following alternatives before using tabs:

  • simplify the content to reduce down the amount
  • separate the content with headings
  • use page contents links to enable users to quickly to navigate to sections of content
  • divide the content across multiple pages

Alternative components

Expanders, tabs and details all hide sections of content which a user can show or hide.

Tabs may work better for users who need to switch quickly between sections because the position of their headings remains static, whereas the expander headings move down the page as you open others.

Consider the number of sections you need to display. Tabs display horizontally so cannot display as many sections as expanders which display vertically. Also consider the use of your service on mobile devices. Tabs only display on viewports > 640px before their content is expanded and stacked vertically under headings.

Use the details component if there is only one section of content that needs to be condensed.

How to use this component

Tabs work well when the primary content block is displayed in the first tab. Subsequent tabs can show further detail and/or deeper levels that relate to the primary content (but this isn’t a strict rule).

The typical tab display will show on viewports that are equal to or greater than 640px.

For viewports >= 640px the following aria attributes will be attached to the DOM via JavaScript on load:

Element ARIA attribute Description
Element ul.hs2-tab__list ARIA attribute role="tablist" Description Convey to screen readers that the element serves as a container for a set of tabs.
Element li.hs2-tab__list-item ARIA attribute role="presentation" Description Convey to screen readers that this element does not have any functional, interactive, or structural relevance implied.
Element a.hs2-tab ARIA attribute role="tab" Description Indicates the element serves as a tab control.
Element ARIA attribute aria-controls="NAME" Description Refers to the tab panel element associated with the tab.
Element ARIA attribute aria-selected="true/false" Description Indicates if the current tab is selected.
Element .hs2-tab__panel ARIA attribute aria-labelledby="TITLE_ID" Description Indicates the associated tab with the current content.
Element ARIA attribute role="tabpanel" Description Indicates that the element is a content panel with associated tab.

For viewports < 640px tabs are displayed as a list and function as a table of contents (TOC). All panels are displayed in the order they are structured. Clicking a TOC link will jump the user to the associated panel.

Tabs use JavaScript so when it's turned off, the content is also displayed in this way.

A visually hidden <h2> should be added above the tabs list to provide further information and context to screen reader users. This will also be displayed for non JavaScript users.

Use clear and short labels

Tabs hide content and are displayed horizontally, so it's important to use tab labels which are clear and succinct. To avoid the tab layout breaking, consider to using single words or reducing the number of tabs.

Variants

Details tabs

Tabs can be used to reveal hidden blocks of content that provide detail about a media item above, such as an image, video or iframe. Setting "variants": [ 'details' ] will style the tabs appropriately.

You can set "noInitialActiveTab": true to prevent the first tab from being selected when the page is initially loaded.

Open this details tabs example in new window
Copy details tabs code 
<style>
  .example-video-block {
    border: solid 1px #707071;
  }

</style>

<div class="example-video-block">

  <div class="hs2-u-margin-bottom-3">

    <div class="hs2-video hs2-js-video ">

      <a class="hs2-js-video-placeholder hs2-video__link hs2-u-display-block" href="https://www.youtube.com/watch?v=qoNn-J7F0cM">

        <img class="hs2-video__img hs2-u-margin-bottom-2" srcset="/assets/images/design-system/yt-thumbnail.jpg 1x, /assets/images/design-system/yt-thumbnail.jpg 2x" src="/assets/images/design-system/yt-thumbnail.jpg" alt="Youtube video" loading="lazy" />

        <span class="hs2-video__link-text hs2-u-margin-bottom-2">Watch &quot;Carbon Webinar Episode 5: On Track to Net Zero&quot; on Youtube</span>
        <svg class="external-link-icon hs2-u-margin-left-2" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
          <path d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z" transform="translate(-2 -1.99)" />
          <path d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z" transform="translate(-2 -1.99)" />
        </svg>
      </a>

    </div>
  </div>

  <section class="hs2-tabs hs2-tabs--details" data-no-initial-active-tab="true">

    <h2 class="hs2-tabs__title hs2-u-font-size-19">Contents</h2>

    <ul class="hs2-tabs__list">
      <li class="hs2-tab__list-item">
        <a href="#video-description" class="hs2-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: Description" data-ga-label="Show: Description">Description</a>
      </li>
      <li class="hs2-tab__list-item">
        <a href="#video-transcript" class="hs2-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: Transcript" data-ga-label="Show: Transcript">Transcript</a>
      </li>
      <li class="hs2-tab__list-item">
        <a href="#video-embed" class="hs2-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: Embed" data-ga-label="Show: Embed">Embed</a>
      </li>
    </ul>

    <section id="video-description" class="hs2-tabs__panel">
      <div class="example-video-block__details">
        <p>
          In partnership with Decarbonising Transport Week - the UK&apos;s National Awareness Week highlighting the solutions
          to transition to a low carbon transport system - this webinar explores:
        </p>
        <ul>
          <li>
            The project and operation of HS2 - delivering zero carbon travel between London, Birmingham, Manchester, and the biggest
            cities in Scotland.
          </li>
          <li>
            HS2&apos;s modal shift impact - enabling more journeys to be made by electric powered trains and active forms of travel
            in place of fossil fuelled road vehicles and planes.
          </li>
          <li>
            The prevalence of high-speed rail in Europe and how it has decarbonised the continent&apos;s transport system.
          </li>
        </ul>
      </div>
    </section>

    <section id="video-transcript" class="hs2-tabs__panel">
      <div class="example-video-block__details">
        <p>
          - Good afternoon and welcome to our webinar, "HS2: On track to net zero." I&apos;m Marina Garcia Gomez,
          and I&apos;m a project management graduate, recently joined HS2. We&apos;re really proud to bring you this webinar
          in support of Decarbonizing Transport Week, the UK&apos;s National Awareness Week, which provides a dedicated platform
          to voice opinions, share advice and information to help us highlight the solutions to deliver the biggest gains in our
          transition to a low carbon transport network.
        </p>
      </div>
    </section>

    <section id="video-embed" class="hs2-tabs__panel">

      <pre class="language-html"><code>&lt;iframe data-src=&quot;https://www.youtube.com/watch?v=qoNn-J7F0cM&quot; title=&quot;HS2: on track to net zero webinar&amp;apos;&quot; class=&quot;hs2-video__iframe hs2-js-video-iframe&quot; src=&quot;https://www.youtube.com/watch?v=qoNn-J7F0cM&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;</code></pre>
    </section>

  </section>
</div>
Close details tabs code
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.

Nunjucks arguments for details tabs
Name Type Required Description
Name title Type string Required true Description The h2 level heading for the tabs section element required to give context for screen readers. Visually hidden when tabs are visible.
Name titleTag Type string Required false Description The HTML heading tag to wrap the title text in for it’s correct semantic order on the page. Will default to an h2
Name tabs Type array Required true Description An array of tabs
Name tabs[].id Type string Required false Description Sets the HTML id of the tab
Name tabs[].title Type string Required true Description The title for the tab
Name tabs[].content Type string Required true Description The contents of the tab. This can contain HTML.
Name variants Type array Required false Description Adjust the component using available variants: “details”
Name noInitialActiveTab Type boolean Required false Description Do not initially show an active tab when true.
Copy details tabs code 
<style>
    .example-video-block {
        border: solid 1px #707071;
    }
</style>

<div class="example-video-block">
    {% from "video/macro.njk" import video %}
    <div class="hs2-u-margin-bottom-3">
        {{
            video({
            "videoEmbedUrl": 'https://www.youtube.com/watch?v=qoNn-J7F0cM',
            "videoLinkURL": 'https://www.youtube.com/watch?v=qoNn-J7F0cM',
            "allowEmbed": false,
            "image": {
                "largeSrc": '/assets/images/design-system/yt-thumbnail.jpg',
                "smallSrc": '/assets/images/design-system/yt-thumbnail.jpg',
                "alt": "Youtube video"
            },
            "title": 'HS2: on track to net zero webinar',
            "linkText": 'Watch "Carbon Webinar Episode 5: On Track to Net Zero" on Youtube'
            })
        }}
    </div>

    {% from "tabs/macro.njk" import tabs %}
    {{
        tabs({
            "variants": [ 'details' ],
            "noInitialActiveTab": true,
            "title": 'Contents',
            "tabs": [
                {
                    "id": "video-description",
                    "title": 'Description',
                    "content": '<div class="example-video-block__details">
                        <p>
                            In partnership with Decarbonising Transport Week - the UK&apos;s National Awareness Week highlighting the solutions
                            to transition to a low carbon transport system - this webinar explores: 
                        </p>
                        <ul>
                            <li>
                                The project and operation of HS2 - delivering zero carbon travel between London, Birmingham, Manchester, and the biggest
                                cities in Scotland.
                            </li>
                            <li>
                                HS2&apos;s modal shift impact - enabling more journeys to be made by electric powered trains and active forms of travel
                                in place of fossil fuelled road vehicles and planes.
                            </li>
                            <li>
                                The prevalence of high-speed rail in Europe and how it has decarbonised the continent&apos;s transport system.
                            </li>
                        </ul>
                    </div>'
                },
                {
                    "id": "video-transcript",
                    "title": 'Transcript',
                    "content": '<div class="example-video-block__details">
                        <p>
                            - Good afternoon and welcome to our webinar, "HS2: On track to net zero." I&apos;m Marina Garcia Gomez,
                            and I&apos;m a project management graduate, recently joined HS2. We&apos;re really proud to bring you this webinar
                            in support of Decarbonizing Transport Week, the UK&apos;s National Awareness Week, which provides a dedicated platform
                            to voice opinions, share advice and information to help us highlight the solutions to deliver the biggest gains in our
                            transition to a low carbon transport network.
                        </p>
                    </div>'
                },
                {
                    "id": "video-embed",
                    "title": 'Embed',
                    "content": '
                        <pre class="language-html"><code>' ~ '<iframe data-src="https://www.youtube.com/watch?v=qoNn-J7F0cM" title="HS2: on track to net zero webinar&apos;" class="hs2-video__iframe hs2-js-video-iframe" src="https://www.youtube.com/watch?v=qoNn-J7F0cM" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' | e ~ '</code></pre>'
                }
            ]
        })
    }}
</div>
Close details tabs code