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
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. |
| 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. |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details header element |
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">UKIS</a></li>
<li class="ons-tab__list-item"><a href="#vacancy-survey" class="ons-tab">Vacancy survey</a></li>
<li class="ons-tab__list-item"><a href="#monthly-business-survey" class="ons-tab">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 |
| role="tablist" | Convey to screen readers that the element serves as a container for a set of tabs. |
| role="presentation" | Convey to screen readers that this element does not have any functional, interactive, or structural relevance implied. |
|
|
|
| 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
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/OwYVwPPxPj4',
"videoLinkURL": 'https://www.youtube.com/watch?v=OwYVwPPxPj4',
"image": {
"largeSrc": '/patternlib-img/youtube-example-cover.png',
"smallSrc": '/patternlib-img/youtube-example-cover.png',
"alt": "Youtube video"
},
"title": 'Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL',
"linkText": 'Watch “Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL“ on Youtube'
})
}}
{% from "components/tabs/_macro.njk" import onsTabs %}
{{
onsTabs({
"variants": ['details'],
"noInitialActiveTab": true,
"title": 'Contents',
"tabs": [
{
"id": "video-description",
"title": 'Description',
"hiddenSpan": 'for Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL',
"content": '<div class="example-video-block__details">
<h3 class="ons-u-d-no@s">Description</h3>
<p>We explain our plans to transform the ways we collect data and produce statistics that better serve everybody with our Dynamic Population Model (DPM), with British Sign Language (BSL).</p>'
},
{
"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>at the office for National statistics we</p>
<p>publish statistics about the size and</p>
<p>structure of the population that</p>
<p>organizations use to make important</p>
<p>decisions about local services</p>
<p>like deciding how many school and</p>
<p>Hospital places an area might need or</p>
<p>where to put a new Supermarket to make</p>
<p>these decisions people need the most</p>
<p>up-to-date information about the</p>
<p>changing shape of our population to</p>
<p>estimate the population we start with</p>
<p>Census Data this is collected every 10</p>
<p>years every year we add birds and people</p>
<p>who move into the country or local area</p>
<p>and remove people who have died or who</p>
<p>have moved away we need to make sure</p>
<p>that data about births deaths and</p>
<p>migration from numerous data sources and</p>
<p>systems are received processed and</p>
<p>quality assured</p>
<p>when this is done the statistics are</p>
<p>ready for decision makers to use about a</p>
<p>year later but the accuracy of these</p>
<p>estimates declines as we move away from</p>
<p>the Census year and because our</p>
<p>population is changing more rapidly than</p>
<p>ever decision makers need this</p>
<p>information faster to meet this need</p>
<p>we're exploring new and innovative ways</p>
<p>to create population statistics which is</p>
<p>why we've developed the dynamic</p>
<p>population model or DPM the DPM still</p>
<p>uses information about birds deaths and</p>
<p>internal and international migration but</p>
<p>it also uses new information in</p>
<p>different ways to get the best from</p>
<p>available data</p>
<p>we've built the DPM to produce</p>
<p>statistics that are flexible and</p>
<p>resilient it uses a wide range of data</p>
<p>sources like linked administrative data</p>
<p>which is information that we all share</p>
<p>when we access Public Services like the</p>
<p>tax benefits and Health Systems the DPM</p>
<p>also uses data about births and deaths</p>
<p>students in schools and much more and</p>
<p>because it doesn't rely on a single data</p>
<p>source it can produce high quality</p>
<p>population estimates on time even when a</p>
<p>data source changes</p>
<p>we've also designed it to be accurate</p>
<p>And Timely</p>
<p>the DPM balances the count of the</p>
<p>population alongside local and National</p>
<p>migration this makes sure that our</p>
<p>population estimates are consistent and</p>
<p>accurate and means we can produce</p>
<p>provisional population estimates within</p>
<p>six months of the reference date for</p>
<p>example we were able to produce mid-year</p>
<p>population estimates for 2022 four</p>
<p>months ahead of the planned official</p>
<p>estimates</p>
<p>this also shows how responsive and smart</p>
<p>the DPM can be quickly spotting when</p>
<p>patterns and Trends have changed as it</p>
<p>did with the mid-year population</p>
<p>estimates for 2022 showing how the</p>
<p>population had moved around after the</p>
<p>coronavirus pandemic</p>
<p>to improve our population estimates it</p>
<p>can also tell when data are incomplete</p>
<p>for example it spotted changes in Health</p>
<p>Data we use which meant that we could</p>
<p>decide how best to use them</p>
<p>to make sure that we produce secure high</p>
<p>quality reliable population statistics</p>
<p>independent external experts have</p>
<p>peer-reviewed the methods we use in the</p>
<p>DPM our population estimates also need</p>
<p>to meet a quality standard that is close</p>
<p>to the level delivered in census years</p>
<p>we expect the DPM admin based population</p>
<p>estimates to meet this level of quality</p>
<p>year after year</p>
<p>to find out more about the dynamic</p>
<p>population model visit the ons website</p>
</div>"
},
{
"id": "video-embed",
"title": 'Embed',
"hiddenSpan": 'code for Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL',
"content": '<h3 class="ons-u-d-no@s">Embed</h3>
<pre class="language-html"><code class="ons-u-wrap">' ~ '<iframe width="560" height="315" src="https://www.youtube.com/embed/OwYVwPPxPj4" 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. |
| 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. |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the details header element |
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=OwYVwPPxPj4"
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 “Transforming the way we produce statistics | Explaining
the Dynamic Population Model | BSL“ on Youtube</span>
</span><span class="ons-external-link__icon"> <svg class="ons-icon" viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden=true role="img"
title="ons-icon-external-link">
<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/OwYVwPPxPj4"
title="Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL"
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">Description<span
class='ons-u-vh'>for Transforming the way we produce statistics | Explaining the Dynamic Population Model
| BSL</span></a></li>
<li class="ons-tab__list-item"><a href="#video-transcript" class="ons-tab">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">Embed<span class='ons-u-vh'>code for
Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL</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>We explain our plans to transform the ways we collect data and produce statistics that better serve everybody
with our Dynamic Population Model (DPM), with British Sign Language (BSL).</p>
</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>at the office for National statistics we</p>
<p>publish statistics about the size and</p>
<p>structure of the population that</p>
<p>organizations use to make important</p>
<p>decisions about local services</p>
<p>like deciding how many school and</p>
<p>Hospital places an area might need or</p>
<p>where to put a new Supermarket to make</p>
<p>these decisions people need the most</p>
<p>up-to-date information about the</p>
<p>changing shape of our population to</p>
<p>estimate the population we start with</p>
<p>Census Data this is collected every 10</p>
<p>years every year we add birds and people</p>
<p>who move into the country or local area</p>
<p>and remove people who have died or who</p>
<p>have moved away we need to make sure</p>
<p>that data about births deaths and</p>
<p>migration from numerous data sources and</p>
<p>systems are received processed and</p>
<p>quality assured</p>
<p>when this is done the statistics are</p>
<p>ready for decision makers to use about a</p>
<p>year later but the accuracy of these</p>
<p>estimates declines as we move away from</p>
<p>the Census year and because our</p>
<p>population is changing more rapidly than</p>
<p>ever decision makers need this</p>
<p>information faster to meet this need</p>
<p>we're exploring new and innovative ways</p>
<p>to create population statistics which is</p>
<p>why we've developed the dynamic</p>
<p>population model or DPM the DPM still</p>
<p>uses information about birds deaths and</p>
<p>internal and international migration but</p>
<p>it also uses new information in</p>
<p>different ways to get the best from</p>
<p>available data</p>
<p>we've built the DPM to produce</p>
<p>statistics that are flexible and</p>
<p>resilient it uses a wide range of data</p>
<p>sources like linked administrative data</p>
<p>which is information that we all share</p>
<p>when we access Public Services like the</p>
<p>tax benefits and Health Systems the DPM</p>
<p>also uses data about births and deaths</p>
<p>students in schools and much more and</p>
<p>because it doesn't rely on a single data</p>
<p>source it can produce high quality</p>
<p>population estimates on time even when a</p>
<p>data source changes</p>
<p>we've also designed it to be accurate</p>
<p>And Timely</p>
<p>the DPM balances the count of the</p>
<p>population alongside local and National</p>
<p>migration this makes sure that our</p>
<p>population estimates are consistent and</p>
<p>accurate and means we can produce</p>
<p>provisional population estimates within</p>
<p>six months of the reference date for</p>
<p>example we were able to produce mid-year</p>
<p>population estimates for 2022 four</p>
<p>months ahead of the planned official</p>
<p>estimates</p>
<p>this also shows how responsive and smart</p>
<p>the DPM can be quickly spotting when</p>
<p>patterns and Trends have changed as it</p>
<p>did with the mid-year population</p>
<p>estimates for 2022 showing how the</p>
<p>population had moved around after the</p>
<p>coronavirus pandemic</p>
<p>to improve our population estimates it</p>
<p>can also tell when data are incomplete</p>
<p>for example it spotted changes in Health</p>
<p>Data we use which meant that we could</p>
<p>decide how best to use them</p>
<p>to make sure that we produce secure high</p>
<p>quality reliable population statistics</p>
<p>independent external experts have</p>
<p>peer-reviewed the methods we use in the</p>
<p>DPM our population estimates also need</p>
<p>to meet a quality standard that is close</p>
<p>to the level delivered in census years</p>
<p>we expect the DPM admin based population</p>
<p>estimates to meet this level of quality</p>
<p>year after year</p>
<p>to find out more about the dynamic</p>
<p>population model visit the ons website</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 class="ons-u-wrap"><iframe width="560" height="315" src="https://www.youtube.com/embed/OwYVwPPxPj4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></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)