Tabs

Overview

Use tabs to help users navigate between short sections of related content within a single page, showing one section at a time.

Example Tabs contents

Nunjucksfor Example Tabs
Nunjucks macro optionsfor Example Tabs
HTMLfor Example Tabs

Nunjucks

{% from "components/tabs/_macro.njk" import onsTabs %}

{{
    onsTabs({
        "title": 'Contents',
        "titleClasses": 'ons-u-fs-m',
        "tabs": [
            {
                "id": "ukis",
                "title": 'UKIS',
                "showTitle": true,
                "content": '<h3>Aim of this survey</h3>
                <p class="ons-u-fs-r">The aim of the UK Innovation Survey (UKIS) is to collect data from businesses about various aspects of their innovation related activities. Using this data we can measure the level, types and trends in innovation.</p>
                <h3>How we’ll use this data</h3>
                <p class="ons-u-fs-r">The UKIS data is a major source of evidence to inform government policy. It is used to promote innovation activities among businesses to boost economic growth. It is an important contribution to the European-wide Community Innovation Survey (CIS). The CIS is used for international benchmarking and comparison purposes.</p>
                <p>You can <a href="https://www.ons.gov.uk/surveys/informationforbusinesses/businesssurveys/ukinnovationsurvey">find more information on the UKIS survey on the ONS website</a>.</p>'
            },
            {
                "id": "vacancy-survey",
                "title": 'Vacancy survey',
                "showTitle": true,
                "content": '<h3>Purpose</h3>
                <p class="ons-u-fs-r">The Vacancy Survey is a regular survey of businesses, which provides an accurate and comprehensive measure of the total number of vacancies across the economy and fills a gap in the information available regarding the demand for labour. Before the Vacancy Survey was introduced, the only information available nationally about vacancies was from records of vacancies notified to Job Centres by employers. This provided only a partial picture, possibly less than half of all vacancies, because employers are under no obligation to notify vacancies to Job Centres. This business based survey has a more complete coverage and is included in the monthly ONS Labour Market Statistical Bulletin.</p>
                <p>You can <a href="https://www.ons.gov.uk/surveys/informationforbusinesses/businesssurveys/vacancysurvey">find more information on the Vacancy Survey on the ONS website</a>.</p>'
            },
            {
                "id": "monthly-business-survey",
                "title": 'Monthly Business Survey',
                "showTitle": true,
                "content": '<h3>Aim of this survey</h3>
                <p class="ons-u-fs-r">The Monthly Business Survey (MBS) collects monthly information on employment of businesses in Great Britain. Your response contributes to Labour Market Statistics.</p>
                <h4>What you need to know</h4>
                <p class="ons-u-fs-r">To complete the survey, you will need the following information to answer the survey questions:</p>
                <ul>
                    <li>number of full-time/part-time male employees</li>
                    <li>number of full-time/part-time female employees</li>
                    <li>total number of employees for the business</li>
                </ul>
                <p>You can <a href="https://www.ons.gov.uk/surveys/informationforbusinesses/businesssurveys/monthlybusinesssurveyretailsalesindex">find more information on the Monthly Business Survey on the ONS website</a>.</p>'
            }
        ]
    })
}}

Nunjucks macro options

Name	Type	Required	Description
title	string	true	The `h2` level heading for the tabs `section` element required to give context for screen readers. Visually hidden when tabs are visible.
titleTag	string	false	The HTML heading tag to wrap the title text in for it’s correct semantic order on the page. Will default to an `h2`
titleClasses	string	false	Additional utility classes to be added to titleTag
tabs	array`<tab>`	true	An array of tabs
variants	array`<string>`	false	Adjust the component using available variants: “details”
noInitialActiveTab	boolean	false	Do not initially show an active tab when `true`.

Tab

Name	Type	Required	Description
id	string	false	Sets the HTML `id` of the tab
title	string	true	The title for the tab
showTitle	boolean	false	Sets an optional `h2` which will be displayed only in toc view and visually hidden in tab view.
hiddenSpan	string	false	Sets a visually hidden span after the title to distinguish the tab from others if multiple tabs with same title are displayed in the same page
content	string	true	The contents of the tab. This can contain HTML.

HTML

<section class="ons-tabs">
  <h2 class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no ons-u-fs-m">Contents</h2>
  <div>
    <ul class="ons-tabs__list">
      <li class="ons-tab__list-item"><a href="#ukis" class="ons-tab" data-ga="click" data-ga-category="tabs"
          data-ga-action="Show: UKIS" data-ga-label="Show: UKIS">UKIS</a></li>
      <li class="ons-tab__list-item"><a href="#vacancy-survey" class="ons-tab" data-ga="click" data-ga-category="tabs"
          data-ga-action="Show: Vacancy survey" data-ga-label="Show: Vacancy survey">Vacancy survey</a></li>
      <li class="ons-tab__list-item"><a href="#monthly-business-survey" class="ons-tab" data-ga="click"
          data-ga-category="tabs" data-ga-action="Show: Monthly Business Survey"
          data-ga-label="Show: Monthly Business Survey">Monthly Business Survey</a></li>
    </ul>
  </div>
  <section id="ukis" class="ons-tabs__panel">
    <h2 id="ukis-content-title" class="ons-u-vh">UKIS</h2>
    <h3>Aim of this survey</h3>
    <p class="ons-u-fs-r">The aim of the UK Innovation Survey (UKIS) is to collect data from businesses about various
      aspects of their innovation related activities. Using this data we can measure the level, types and trends in
      innovation.</p>
    <h3>How we’ll use this data</h3>
    <p class="ons-u-fs-r">The UKIS data is a major source of evidence to inform government policy. It is used to promote
      innovation activities among businesses to boost economic growth. It is an important contribution to the
      European-wide Community Innovation Survey (CIS). The CIS is used for international benchmarking and comparison
      purposes.</p>
    <p>You can <a href="https://www.ons.gov.uk/surveys/informationforbusinesses/businesssurveys/ukinnovationsurvey">find
        more information on the UKIS survey on the ONS website</a>.</p>
  </section>
  <section id="vacancy-survey" class="ons-tabs__panel">
    <h2 id="vacancy-survey-content-title" class="ons-u-vh">Vacancy survey</h2>
    <h3>Purpose</h3>
    <p class="ons-u-fs-r">The Vacancy Survey is a regular survey of businesses, which provides an accurate and
      comprehensive measure of the total number of vacancies across the economy and fills a gap in the information
      available regarding the demand for labour. Before the Vacancy Survey was introduced, the only information
      available nationally about vacancies was from records of vacancies notified to Job Centres by employers. This
      provided only a partial picture, possibly less than half of all vacancies, because employers are under no
      obligation to notify vacancies to Job Centres. This business based survey has a more complete coverage and is
      included in the monthly ONS Labour Market Statistical Bulletin.</p>
    <p>You can <a href="https://www.ons.gov.uk/surveys/informationforbusinesses/businesssurveys/vacancysurvey">find more
        information on the Vacancy Survey on the ONS website</a>.</p>
  </section>
  <section id="monthly-business-survey" class="ons-tabs__panel">
    <h2 id="monthly-business-survey-content-title" class="ons-u-vh">Monthly Business Survey</h2>
    <h3>Aim of this survey</h3>
    <p class="ons-u-fs-r">The Monthly Business Survey (MBS) collects monthly information on employment of businesses in
      Great Britain. Your response contributes to Labour Market Statistics.</p>
    <h4>What you need to know</h4>
    <p class="ons-u-fs-r">To complete the survey, you will need the following information to answer the survey
      questions:</p>
    <ul>
      <li>number of full-time/part-time male employees</li>
      <li>number of full-time/part-time female employees</li>
      <li>total number of employees for the business</li>
    </ul>
    <p>You can <a
        href="https://www.ons.gov.uk/surveys/informationforbusinesses/businesssurveys/monthlybusinesssurveyretailsalesindex">find
        more information on the Monthly Business Survey on the ONS website</a>.</p>
  </section>
</section>

When to use this component

Tabs work well for users who need to switch quickly between sections because the position of their headings remains static.

When not to use this component

Do not use tabs to display content that is critical to the user understanding or being able to progress with their task.

Consider the use of your service on mobile devices. Tabs only display on viewports wider than the medium breakpoint before their content is expanded and stacked vertically under headings.

Test your content considering the following alternatives before using tabs:

simplify and reduce the content
separate the content with headings
divide the content across multiple pages

Alternative components

You can help users navigate quickly through page headings using a table of contents.

To hide sections of content which a user can reveal, you can also use details and accordions.

Accordions display vertically, which means that they can display more sections than tabs which display horizontally.

If there is only one section of content that needs to be condensed, use a details.

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 is not a strict rule).

Use clear and short labels

Tabs hide content, so use tab labels that are clear, concise and tell the user what they are opening.

To avoid the tab layout breaking, consider using single words or reducing the number of tabs.

How this component works

Viewports equal to or larger than the medium breakpoint

The typical tab display will show on viewports that are equal to or greater than the medium breakpoint.

Where this is true the following aria attributes will be attached to the DOM via JavaScript on load:

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

Viewports smaller than the medium breakpoint

For viewports smaller than the medium breakpoint, tabs are displayed as a list and function as a table of contents.

Important information:

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

All panels are displayed in the order they are structured. Selecting a link in the table of contents will jump the user to the associated panel.

A 'Contents' heading should be added above the table of contents list to provide further information and context to screen reader users. This will also be displayed for non JavaScript users.

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

Example Tabs Details contents

Nunjucksfor Example Tabs Details
Nunjucks macro optionsfor Example Tabs Details
HTMLfor Example Tabs Details

Nunjucks

<style>
  .example-video-block {
    border: solid 1px #707071;
  }
</style>

<div class="example-video-block">
    {% from "components/video/_macro.njk" import onsVideo %}
    {{
        onsVideo({
        "videoEmbedUrl": 'https://www.youtube.com/embed/_EGJlvkgbPo',
        "videoLinkURL": 'https://www.youtube.com/watch?v=_EGJlvkgbPo',
        "image": {
            "largeSrc": '/patternlib-img/youtube-example-cover.png',
            "smallSrc": '/patternlib-img/youtube-example-cover.png',
            "alt": "Youtube video"
        },
        "title": 'Census 2021 promotional TV advert',
        "linkText": 'Watch “Census 2021 promotional TV advert“ on Youtube'
        })
    }}

    {% from "components/tabs/_macro.njk" import onsTabs %}
    {{
        onsTabs({
            "variants": [ 'details' ],
            "noInitialActiveTab": true,
            "title": 'Contents',
            "tabs": [
                {
                    "id": "video-description",
                    "title": 'Description',
                    "hiddenSpan": 'for Census 2021 promotional TV advert video',
                    "content": '<div class="example-video-block__details">
                        <h3 class="ons-u-d-no@s">Description</h3>
                        <p>The census provides a snapshot of everyone in England & Wales. We help local councils get the funding they need.</p>
                        <p>If you live in one of the rehearsal areas help us by taking part in the #CensusRehearsal.</p>
                    </div>'
                },
                {
                    "id": "video-transcript",
                    "title": 'Transcript',
                    "hiddenSpan": 'for Census 2021 promotional TV advert video',
                    "content": '<div class="example-video-block__details">
                        <h3 class="ons-u-d-no@s">Transcript</h3>
                        <p>I count.</p>
                        <p>I count.</p>
                        <p>I still count.</p>
                        <p>When it comes to getting our fair share of services like health care, transport, housing and education, the census really counts. And what makes the census count is all of us.</p>
                    </div>'
                },
                {
                    "id": "video-embed",
                    "title": 'Embed',
                    "hiddenSpan": 'code for Census 2021 promotional TV advert video',
                    "content": '<h3 class="ons-u-d-no@s">Embed</h3>
                        <pre class="language-html"><code>' ~ '<iframe width="560" height="315" src="https://www.youtube.com/embed/_EGJlvkgbPo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' | e ~ '</code></pre>'
                }
            ]
        })
    }}
</div>

Nunjucks macro options

Name	Type	Required	Description
title	string	true	The `h2` level heading for the tabs `section` element required to give context for screen readers. Visually hidden when tabs are visible.
titleTag	string	false	The HTML heading tag to wrap the title text in for it’s correct semantic order on the page. Will default to an `h2`
titleClasses	string	false	Additional utility classes to be added to titleTag
tabs	array`<tab>`	true	An array of tabs
variants	array`<string>`	false	Adjust the component using available variants: “details”
noInitialActiveTab	boolean	false	Do not initially show an active tab when `true`.

Tab

Name	Type	Required	Description
id	string	false	Sets the HTML `id` of the tab
title	string	true	The title for the tab
showTitle	boolean	false	Sets an optional `h2` which will be displayed only in toc view and visually hidden in tab view.
hiddenSpan	string	false	Sets a visually hidden span after the title to distinguish the tab from others if multiple tabs with same title are displayed in the same page
content	string	true	The contents of the tab. This can contain HTML.

HTML

<style>
  .example-video-block {
    border: solid 1px #707071;
  }
</style>
<div class="example-video-block">
  <div class="ons-video ons-js-video">
    <a href="https://www.youtube.com/watch?v=_EGJlvkgbPo"
      class="ons-external-link ons-video__link ons-js-video-placeholder ons-u-db" target="_blank" rel="noopener">
      <span class="ons-external-link__text">
        <img class="ons-video__img ons-u-mb-xs"
          srcset="/patternlib-img/youtube-example-cover.png 1x, /patternlib-img/youtube-example-cover.png 2x"
          src="/patternlib-img/youtube-example-cover.png" alt="Youtube video" loading="lazy">
        <span class="ons-video__link-text ons-u-mt-xs">Watch “Census 2021 promotional TV advert“ on Youtube</span>
      </span><span class="ons-external-link__icon">&nbsp;<svg class="ons-icon" 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></span><span class="ons-external-link__new-window-description ons-u-vh"> (opens in a new tab)</span></a>
    <iframe data-src="https://www.youtube.com/embed/_EGJlvkgbPo" title="Census 2021 promotional TV advert"
      class="ons-video__iframe ons-js-video-iframe ons-u-d-no" src="about:blank" frameborder="0"
      allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <section class="ons-tabs ons-tabs--details" data-no-initial-active-tab="true">
    <h2 class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no">Contents</h2>
    <div>
      <ul class="ons-tabs__list">
        <li class="ons-tab__list-item"><a href="#video-description" class="ons-tab" data-ga="click"
            data-ga-category="tabs" data-ga-action="Show: Description"
            data-ga-label="Show: Description">Description<span class='ons-u-vh'>for Census 2021 promotional TV advert
              video</span></a></li>
        <li class="ons-tab__list-item"><a href="#video-transcript" class="ons-tab" data-ga="click"
            data-ga-category="tabs" data-ga-action="Show: Transcript" data-ga-label="Show: Transcript">Transcript<span
              class='ons-u-vh'>for Census 2021 promotional TV advert video</span></a></li>
        <li class="ons-tab__list-item"><a href="#video-embed" class="ons-tab" data-ga="click" data-ga-category="tabs"
            data-ga-action="Show: Embed" data-ga-label="Show: Embed">Embed<span class='ons-u-vh'>code for Census 2021
              promotional TV advert video</span></a></li>
      </ul>
    </div>
    <section id="video-description" class="ons-tabs__panel">
      <div class="example-video-block__details">
        <h3 class="ons-u-d-no@s">Description</h3>
        <p>The census provides a snapshot of everyone in England & Wales. We help local councils get the funding they
          need.</p>
        <p>If you live in one of the rehearsal areas help us by taking part in the #CensusRehearsal.</p>
      </div>
    </section>
    <section id="video-transcript" class="ons-tabs__panel">
      <div class="example-video-block__details">
        <h3 class="ons-u-d-no@s">Transcript</h3>
        <p>I count.</p>
        <p>I count.</p>
        <p>I still count.</p>
        <p>When it comes to getting our fair share of services like health care, transport, housing and education, the
          census really counts. And what makes the census count is all of us.</p>
      </div>
    </section>
    <section id="video-embed" class="ons-tabs__panel">
      <h3 class="ons-u-d-no@s">Embed</h3>
      <pre class="language-html"><code>&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/_EGJlvkgbPo&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;</code></pre>
    </section>
  </section>
</div>

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Tabs’ component on GitHub (opens in a new tab)

Cookies on ons.gov.uk

Tabs

Overview

Example Tabs contents

Nunjucks

Nunjucks macro options

Tab

HTML

When to use this component

When not to use this component

Alternative components

How to use this component

Use clear and short labels

How this component works

Viewports equal to or larger than the medium breakpoint

Viewports smaller than the medium breakpoint

Variants

Details tabs

Example Tabs Details contents

Nunjucks

Nunjucks macro options

Tab

HTML

Help improve this page