Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.
Tabs
Tabs let the user navigate between sections of content, showing one section at a time.
{% from "components/tabs/_macro.njk" import onsTabs %}
{{
onsTabs({
"title": 'Contents',
"tabs": [
{
"id": "ukis",
"title": 'UKIS',
"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',
"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',
"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
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
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">Contents</h2>
<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>
<section id="ukis" class="ons-tabs__panel">
<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">
<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">
<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
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
Accordions, 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 accordion 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 accordions 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
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"
Indicates the element serves as a tab control.
aria-controls="NAME"
Refers to the tab panel element associated with the tab.
aria-selected="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.
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.
<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',
"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',
"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',
"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
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
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"> <svg class="ons-svg-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>
<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</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</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</a></li>
</ul>
<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><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></code></pre>
</section>
</section>
</div>