Tabs
Experimental
This component is currently experimental because more research is needed to validate it.
This component is currently experimental because more research is needed to validate it.
The tabs component lets users navigate between related sections of content, displaying one section at a time.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/components/tabs/default/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">tabs</span>
example in a new tab
</a>
</div>
<iframe title="Tabs example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/tabs/default/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-tabs-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#tabs-example-html" role="tab" aria-controls="tabs-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#tabs-example-nunjucks" role="tab" aria-controls="tabs-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#tabs-example-html" aria-controls="tabs-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="tabs-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-tabs"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-tabs"</span>></span>
<h2 class="govuk-tabs__title"> Contents </h2> <ul class="govuk-tabs__list"> <li class="govuk-tabs__list-item govuk-tabs__list-item--selected"> <a class="govuk-tabs__tab" href="#past-day"> Past day </a> </li> <li class="govuk-tabs__list-item"> <a class="govuk-tabs__tab" href="#past-week"> Past week </a> </li> <li class="govuk-tabs__list-item"> <a class="govuk-tabs__tab" href="#past-month"> Past month </a> </li> <li class="govuk-tabs__list-item"> <a class="govuk-tabs__tab" href="#past-year"> Past year </a> </li> </ul> <div class="govuk-tabs__panel" id="past-day"> <h2 class="govuk-heading-l">Past day</h2> <table class="govuk-table"> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th scope="col" class="govuk-table__header">Case manager</th> <th scope="col" class="govuk-table__header">Cases opened</th> <th scope="col" class="govuk-table__header">Cases closed</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <td class="govuk-table__cell">David Francis</td> <td class="govuk-table__cell">3</td> <td class="govuk-table__cell">0</td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell">Paul Farmer</td> <td class="govuk-table__cell">1</td> <td class="govuk-table__cell">0</td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell">Rita Patel</td> <td class="govuk-table__cell">2</td> <td class="govuk-table__cell">0</td> </tr> </tbody> </table> </div> <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week"> <h2 class="govuk-heading-l">Past week</h2> <table class="govuk-table"> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th scope="col" class="govuk-table__header">Case manager</th> <th scope="col" class="govuk-table__header">Cases opened</th> <th scope="col" class="govuk-table__header">Cases closed</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <td class="govuk-table__cell">David Francis</td> <td class="govuk-table__cell">24</td> <td class="govuk-table__cell">18</td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell">Paul Farmer</td> <td class="govuk-table__cell">16</td> <td class="govuk-table__cell">20</td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell">Rita Patel</td> <td class="govuk-table__cell">24</td> <td class="govuk-table__cell">27</td> </tr> </tbody> </table> </div> <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month"> <h2 class="govuk-heading-l">Past month</h2> <table class="govuk-table"> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th scope="col" class="govuk-table__header">Case manager</th> <th scope="col" class="govuk-table__header">Cases opened</th> <th scope="col" class="govuk-table__header">Cases closed</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <td class="govuk-table__cell">David Francis</td> <td class="govuk-table__cell">98</td> <td class="govuk-table__cell">95</td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell">Paul Farmer</td> <td class="govuk-table__cell">122</td> <td class="govuk-table__cell">131</td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell">Rita Patel</td> <td class="govuk-table__cell">126</td> <td class="govuk-table__cell">142</td> </tr> </tbody> </table> </div> <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year"> <h2 class="govuk-heading-l">Past year</h2> <table class="govuk-table"> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th scope="col" class="govuk-table__header">Case manager</th> <th scope="col" class="govuk-table__header">Cases opened</th> <th scope="col" class="govuk-table__header">Cases closed</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <td class="govuk-table__cell">David Francis</td> <td class="govuk-table__cell">1380</td> <td class="govuk-table__cell">1472</td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell">Paul Farmer</td> <td class="govuk-table__cell">1129</td> <td class="govuk-table__cell">1083</td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell">Rita Patel</td> <td class="govuk-table__cell">1539</td> <td class="govuk-table__cell">1265</td> </tr> </tbody> </table> </div> </div>
<div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#tabs-example-nunjucks" aria-controls="tabs-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="tabs-example-nunjucks" role="tabpanel">
<details class="govuk-details app-options" data-module="govuk-details" id="options-tabs-example-details">
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-tabs-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">id</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
This is used for the main component and to compose the ID attribute for each item.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">idPrefix</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
String to prefix id for each tab item if no id is specified on each item.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">title</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Title for the tabs table of contents.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">items</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
Array of tab items.
See <a href="#options-tabs-example--items">items</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the tabs component.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the tabs component.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-tabs-example--items">
<caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">id</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
Specific ID attribute for the tab item. If omitted, then <code>idPrefix</code> string is required instead.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">label</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The text label of a tab item.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the tab.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">panel</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
Content for the panel
See <a href="#options-tabs-example--panel">panel</a>.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-tabs-example--panel">
<caption class="govuk-table__caption govuk-heading-m ">Options for panel</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>html</code> is set, this is not required. Text to use within each tab panel. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>text</code> is set, this is not required. HTML to use within the each tab panel. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the tab panel.
</td>
</tr>
</tbody>
</table>
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/tabs/macro.njk"</span> <span class="hljs-keyword">import</span> govukTabs %}
{% from "govuk/components/table/macro.njk" import govukTable %} {% set pastDayHtml %} <h2 class="govuk-heading-l">Past day</h2> {{ govukTable({ head: [ { text: "Case manager" }, { text: "Cases opened" }, { text: "Cases closed" } ], rows: [ [ { text: "David Francis" }, { text: "3" }, { text: "0" } ], [ { text: "Paul Farmer" }, { text: "1" }, { text: "0" } ], [ { text: "Rita Patel" }, { text: "2" }, { text: "0" } ] ] }) }} {% endset -%} {% set pastWeekHtml %} <h2 class="govuk-heading-l">Past week</h2> {{ govukTable({ head: [ { text: "Case manager" }, { text: "Cases opened" }, { text: "Cases closed" } ], rows: [ [ { text: "David Francis" }, { text: "24" }, { text: "18" } ], [ { text: "Paul Farmer" }, { text: "16" }, { text: "20" } ], [ { text: "Rita Patel" }, { text: "24" }, { text: "27" } ] ] }) }} {% endset -%} {% set pastMonthHtml %} <h2 class="govuk-heading-l">Past month</h2> {{ govukTable({ head: [ { text: "Case manager" }, { text: "Cases opened" }, { text: "Cases closed" } ], rows: [ [ { text: "David Francis" }, { text: "98" }, { text: "95" } ], [ { text: "Paul Farmer" }, { text: "122" }, { text: "131" } ], [ { text: "Rita Patel" }, { text: "126" }, { text: "142" } ] ] }) }} {% endset -%} {% set pastYearHtml %} <h2 class="govuk-heading-l">Past year</h2> {{ govukTable({ head: [ { text: "Case manager" }, { text: "Cases opened" }, { text: "Cases closed" } ], rows: [ [ { text: "David Francis" }, { text: "1380" }, { text: "1472" } ], [ { text: "Paul Farmer" }, { text: "1129" }, { text: "1083" } ], [ { text: "Rita Patel" }, { text: "1539" }, { text: "1265" } ] ] }) }} {% endset -%} {{ govukTabs({ items: [ { label: "Past day", id: "past-day", panel: { html: pastDayHtml } }, { label: "Past week", id: "past-week", panel: { html: pastWeekHtml } }, { label: "Past month", id: "past-month", panel: { html: pastMonthHtml } }, { label: "Past year", id: "past-year", panel: { html: pastYearHtml } } ] }) }}