GOVUK Tabs

An example of the govuk tabs component.

Open example in new window
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" test="value">

<h2 class="govuk-heading-l">Past day</h2>
<p class="govuk-body">Some text</p>

        </div>




        <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">

<h2 class="govuk-heading-l">Past week</h2>
<p class="govuk-body">Some text</p>

        </div>




        <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">

<h2 class="govuk-heading-l">Past month</h2>
<p class="govuk-body">Some text</p>

        </div>




        <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">

<h2 class="govuk-heading-l">Past year</h2>
<p class="govuk-body">Some text</p>

        </div>



</div>
Jinja 
{% from "govuk_frontend_jinja/components/tabs/macro.html" import govukTabs -%}
{% set pastDayHtml %}
<h2 class="govuk-heading-l">Past day</h2>
<p class="govuk-body">Some text</p>
{% endset -%}

{% set pastWeekHtml %}
<h2 class="govuk-heading-l">Past week</h2>
<p class="govuk-body">Some text</p>
{% endset -%}

{% set pastMonthHtml %}
<h2 class="govuk-heading-l">Past month</h2>
<p class="govuk-body">Some text</p>
{% endset -%}

{% set pastYearHtml %}
<h2 class="govuk-heading-l">Past year</h2>
<p class="govuk-body">Some text</p>
{% endset -%}

{{ govukTabs({
  "items": [
    {
      "label": "Past day",
      "id": "past-day",
      "panel": {
        "html": pastDayHtml,
        "attributes": {
          "test": "value"
        }
      }
    },
    {
      "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
      }
    }
  ]
}) }}