Components

Tabs

The tabs component lets users navigate between related sections of content, displaying one section at a time.

Open this tabs example in a new tab

Contents

Past day

Case managerCases openedCases closed
David Francis30
Paul Farmer10
Rita Patel20

Past week

Case managerCases openedCases closed
David Francis2418
Paul Farmer1620
Rita Patel2427

Past month

Case managerCases openedCases closed
David Francis9895
Paul Farmer122131
Rita Patel126142

Past year

Case managerCases openedCases closed
David Francis13801472
Paul Farmer11291083
Rita Patel15391265
HTML 
<div class="govuk-tabs" data-module="govuk-tabs">
  <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>
Nunjucks
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.

Primary options
Name Type Description
id string

This is used for the main component and to compose the ID attribute for each item.
idPrefix string

Optional prefix. This is used to prefix the id attribute for each tab item and panel, separated by -.
title string

Title for the tabs table of contents.
items array Required.

The individual tabs within the tabs component.

See items.
classes string

Classes to add to the tabs component.
attributes object

HTML attributes (for example data attributes) to add to the tabs component.
Options for items
Name Type Description
id string Required.

Specific ID attribute for the tab item. If omitted, then idPrefix string is required instead.
label string Required.

The text label of a tab item.
attributes object

HTML attributes (for example data attributes) to add to the tab.
panel object Required.

The contents of each tab within the tabs component. This is referenced as a panel.

See panel.
Options for panel
Name Type Description
text string Required.

If html is set, this is not required. Text to use within each tab panel. If html is provided, the text option will be ignored.
html string Required.

If text is set, this is not required. HTML to use within each tab panel. If html is provided, the text option will be ignored.
attributes object

HTML attributes (for example data attributes) to add to the tab panel.

 
{% from "moduk/components/tabs/macro.njk" import modukTabs -%}
{% from "moduk/components/table/macro.njk" import modukTable -%}

{% set pastDayHtml %}
<h2 class="govuk-heading-l">Past day</h2>
{{ modukTable({
  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>
{{ modukTable({
  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>
{{ modukTable({
  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>
{{ modukTable({
  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 -%}

{{ modukTabs({
  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
      }
    }
  ]
}) -}}

See GOV.UK tabs component guidance for:

  • when to use this component
  • when not to use it
  • how it works

Changes from the GOV.UK version

MOD.UK Design System components are closely based on GOV.UK Design System components.

For this component we’ve changed the font.

Have you tested this component?

Let us know how we could improve this component or share your user research findings.

Email the MOD.UK Design System team at design-system@digital.mod.uk

Need help?

Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.