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'
      }
    }
  ]
}) }}