This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content

Tabs

Tabs

Open this example in a new tab: tabs

Code

Markup

<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 class="govuk-table__header" scope="col">Case manager</th>
          <th class="govuk-table__header" scope="col">Cases opened</th>
          <th class="govuk-table__header" scope="col">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 class="govuk-table__header" scope="col">Case manager</th>
          <th class="govuk-table__header" scope="col">Cases opened</th>
          <th class="govuk-table__header" scope="col">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 class="govuk-table__header" scope="col">Case manager</th>
          <th class="govuk-table__header" scope="col">Cases opened</th>
          <th class="govuk-table__header" scope="col">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">
    <p class="govuk-body">There is no data for this year yet, check back later</p>
  </div>
</div>

Macro

{% from "govuk/components/tabs/macro.njk" import govukTabs %}

{{ govukTabs({
  items: [
    {
      label: "Past day",
      id: "past-day",
      panel: {
        html:
          '<h2 class="govuk-heading-l">Past day</h2>\n' +
          '<table class="govuk-table">\n' +
          '  <thead class="govuk-table__head">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <th class="govuk-table__header" scope="col">Case manager</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases opened</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases closed</th>\n' +
          "    </tr>\n" +
          "  </thead>\n" +
          '  <tbody class="govuk-table__body">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">David Francis</td>\n' +
          '      <td class="govuk-table__cell">3</td>\n' +
          '      <td class="govuk-table__cell">0</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Paul Farmer</td>\n' +
          '      <td class="govuk-table__cell">1</td>\n' +
          '      <td class="govuk-table__cell">0</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Rita Patel</td>\n' +
          '      <td class="govuk-table__cell">2</td>\n' +
          '      <td class="govuk-table__cell">0</td>\n' +
          "    </tr>\n" +
          "  </tbody>\n" +
          "</table>\n"
      }
    },
    {
      label: "Past week",
      id: "past-week",
      panel: {
        html:
          '<h2 class="govuk-heading-l">Past week</h2>\n' +
          '<table class="govuk-table">\n' +
          '  <thead class="govuk-table__head">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <th class="govuk-table__header" scope="col">Case manager</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases opened</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases closed</th>\n' +
          "    </tr>\n" +
          "  </thead>\n" +
          '  <tbody class="govuk-table__body">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">David Francis</td>\n' +
          '      <td class="govuk-table__cell">24</td>\n' +
          '      <td class="govuk-table__cell">18</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Paul Farmer</td>\n' +
          '      <td class="govuk-table__cell">16</td>\n' +
          '      <td class="govuk-table__cell">20</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Rita Patel</td>\n' +
          '      <td class="govuk-table__cell">24</td>\n' +
          '      <td class="govuk-table__cell">27</td>\n' +
          "    </tr>\n" +
          "  </tbody>\n" +
          "</table>\n"
      }
    },
    {
      label: "Past month",
      id: "past-month",
      panel: {
        html:
          '<h2 class="govuk-heading-l">Past month</h2>\n' +
          '<table class="govuk-table">\n' +
          '  <thead class="govuk-table__head">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <th class="govuk-table__header" scope="col">Case manager</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases opened</th>\n' +
          '      <th class="govuk-table__header" scope="col">Cases closed</th>\n' +
          "    </tr>\n" +
          "  </thead>\n" +
          '  <tbody class="govuk-table__body">\n' +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">David Francis</td>\n' +
          '      <td class="govuk-table__cell">98</td>\n' +
          '      <td class="govuk-table__cell">95</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Paul Farmer</td>\n' +
          '      <td class="govuk-table__cell">122</td>\n' +
          '      <td class="govuk-table__cell">131</td>\n' +
          "    </tr>\n" +
          '    <tr class="govuk-table__row">\n' +
          '      <td class="govuk-table__cell">Rita Patel</td>\n' +
          '      <td class="govuk-table__cell">126</td>\n' +
          '      <td class="govuk-table__cell">142</td>\n' +
          "    </tr>\n" +
          "  </tbody>\n" +
          "</table>\n"
      }
    },
    {
      label: "Past year",
      id: "past-year",
      panel: {
        text: "There is no data for this year yet, check back later"
      }
    }
  ]
}) }}

Tabs tabs-with-anchor-in-panel

Open this example in a new tab: tabs tabs-with-anchor-in-panel

Ensure that anchors that are in tab panels work correctly

Code

Markup

<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="#tab-1">
        Tab 1
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#tab-2">
        Tab 2
      </a>
    </li>
  </ul>
  <div class="govuk-tabs__panel" id="tab-1">
    <h2 class="govuk-heading-l">Tab 1</h2>
    <p class="govuk-body">Testing that when you click the anchor it moves to the anchor point successfully</p>
    <p class="govuk-body"><a class="govuk-link" href="#anchor">Anchor</a></p>
    <p class="govuk-body"><a id="anchor" tabindex="0">Anchor Point</a></p>
  </div>
  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="tab-2">
    <h2 class="govuk-heading-l">Tab 2</h2>
  </div>
</div>

Macro

{% from "govuk/components/tabs/macro.njk" import govukTabs %}

{{ govukTabs({
  items: [
    {
      label: "Tab 1",
      id: "tab-1",
      panel: {
        html:
          '<h2 class="govuk-heading-l">Tab 1</h2>\n' +
          '<p class="govuk-body">Testing that when you click the anchor it moves to the anchor point successfully</p>\n' +
          '<p class="govuk-body"><a class="govuk-link" href="#anchor">Anchor</a></p>\n' +
          '<p class="govuk-body"><a id="anchor" tabindex="0">Anchor Point</a></p>\n'
      }
    },
    {
      label: "Tab 2",
      id: "tab-2",
      panel: {
        html: '<h2 class="govuk-heading-l">Tab 2</h2>\n'
      }
    }
  ]
}) }}