Tabs examples

• # default

  Open this example in a new tab

  Contents

  Past day

  Case manager	Cases opened	Cases closed
  David Francis	3	0
  Paul Farmer	1	0
  Rita Patel	2	0

  Past week

  Case manager	Cases opened	Cases closed
  David Francis	24	18
  Paul Farmer	16	20
  Rita Patel	24	27

  Past month

  Case manager	Cases opened	Cases closed
  David Francis	98	95
  Paul Farmer	122	131
  Rita Patel	126	142

  There is no data for this year yet, check back later

  {
    "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"
        }
      }
    ]
  }

  
  {% 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"
        }
      }
    ]
  }) }}
          

• # classes

  Open this example in a new tab

  Contents

  Information about tabs

  {
    "classes": "app-tabs--custom-modifier",
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "Information about tabs"
        }
      }
    ]
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "classes": "app-tabs--custom-modifier",
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "Information about tabs"
        }
      }
    ]
  }) }}
          

• # id

  Open this example in a new tab

  Contents

  Information about tabs

  {
    "id": "my-tabs",
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "Information about tabs"
        }
      }
    ]
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "id": "my-tabs",
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "Information about tabs"
        }
      }
    ]
  }) }}
          

• # title

  Open this example in a new tab

  Custom title for Contents

  Information about tabs

  {
    "title": "Custom title for Contents",
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "Information about tabs"
        }
      }
    ]
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "title": "Custom title for Contents",
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "Information about tabs"
        }
      }
    ]
  }) }}
          

• # attributes

  Open this example in a new tab

  Contents

  Information about tabs

  {
    "attributes": {
      "data-attribute": "my data value"
    },
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "Information about tabs"
        }
      }
    ]
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "attributes": {
      "data-attribute": "my data value"
    },
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "Information about tabs"
        }
      }
    ]
  }) }}
          

• # item with attributes

  Open this example in a new tab

  Contents

  Information about tabs

  {
    "items": [
      {
        "id": "tab-1",
        "label": "Tab 1",
        "panel": {
          "text": "Information about tabs"
        },
        "attributes": {
          "data-attribute": "my-attribute",
          "data-attribute-2": "my-attribute-2"
        }
      }
    ]
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "items": [
      {
        "id": "tab-1",
        "label": "Tab 1",
        "panel": {
          "text": "Information about tabs"
        },
        "attributes": {
          "data-attribute": "my-attribute",
          "data-attribute-2": "my-attribute-2"
        }
      }
    ]
  }) }}
          

• # panel with attributes

  Open this example in a new tab

  Contents

  Panel text

  {
    "items": [
      {
        "id": "tab-1",
        "label": "Tab 1",
        "panel": {
          "text": "Panel text",
          "attributes": {
            "data-attribute": "my-attribute",
            "data-attribute-2": "my-attribute-2"
          }
        }
      }
    ]
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "items": [
      {
        "id": "tab-1",
        "label": "Tab 1",
        "panel": {
          "text": "Panel text",
          "attributes": {
            "data-attribute": "my-attribute",
            "data-attribute-2": "my-attribute-2"
          }
        }
      }
    ]
  }) }}
          

• # no item list

  Open this example in a new tab

  Contents

  {
    "id": "my-tabs",
    "classes": "app-tabs--custom-modifier"
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "id": "my-tabs",
    "classes": "app-tabs--custom-modifier"
  }) }}
          

• # empty item list

  Open this example in a new tab

  Contents

  {
    "items": []
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "items": []
  }) }}
          

• # with falsy values

  Open this example in a new tab

  Contents

  Panel 1 content

  Panel 2 content

  {
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "Panel 1 content"
        }
      },
      null,
      false,
      "",
      {
        "label": "Tab 2",
        "id": "tab-2",
        "panel": {
          "text": "Panel 2 content"
        }
      }
    ]
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "Panel 1 content"
        }
      },
      null,
      false,
      "",
      {
        "label": "Tab 2",
        "id": "tab-2",
        "panel": {
          "text": "Panel 2 content"
        }
      }
    ]
  }) }}
          

• # idPrefix

  Open this example in a new tab

  Contents

  Panel 1 content

  Panel 2 content

  {
    "idPrefix": "custom",
    "items": [
      {
        "label": "Tab 1",
        "panel": {
          "text": "Panel 1 content"
        }
      },
      {
        "label": "Tab 2",
        "panel": {
          "text": "Panel 2 content"
        }
      }
    ]
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "idPrefix": "custom",
    "items": [
      {
        "label": "Tab 1",
        "panel": {
          "text": "Panel 1 content"
        }
      },
      {
        "label": "Tab 2",
        "panel": {
          "text": "Panel 2 content"
        }
      }
    ]
  }) }}
          

• # html as text

  Open this example in a new tab

  Contents

  <p>Panel 1 content</p>

  <p>Panel 2 content</p>

  {
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "<p>Panel 1 content</p>"
        }
      },
      {
        "label": "Tab 2",
        "id": "tab-2",
        "panel": {
          "text": "<p>Panel 2 content</p>"
        }
      }
    ]
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "text": "<p>Panel 1 content</p>"
        }
      },
      {
        "label": "Tab 2",
        "id": "tab-2",
        "panel": {
          "text": "<p>Panel 2 content</p>"
        }
      }
    ]
  }) }}
          

• # html

  Open this example in a new tab

  Contents

  Panel 1 content

  Panel 2 content

  {
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "html": "<p>Panel 1 content</p>"
        }
      },
      {
        "label": "Tab 2",
        "id": "tab-2",
        "panel": {
          "html": "<p>Panel 2 content</p>"
        }
      }
    ]
  }

  
  {% from "govuk/components/tabs/macro.njk" import govukTabs %}
  
  {{ govukTabs({
    "items": [
      {
        "label": "Tab 1",
        "id": "tab-1",
        "panel": {
          "html": "<p>Panel 1 content</p>"
        }
      },
      {
        "label": "Tab 2",
        "id": "tab-2",
        "panel": {
          "html": "<p>Panel 2 content</p>"
        }
      }
    ]
  }) }}
          

• # tabs-with-anchor-in-panel

  Open this example in a new tab

  Contents

  Tab 1

  Testing that when you click the anchor it moves to the anchor point successfully

  Anchor

  Anchor Point

  Tab 2

  {
    "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"
        }
      }
    ]
  }

  
  {% 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"
        }
      }
    ]
  }) }}