Components

Tabs

The tabs component can contain multiple sections of information.

Status: To be reviewed

Known issues and gaps
Component status

HTML

<div class="tna-tabs" data-module="tna-tabs">
  <h3 class="tna-tabs__list-heading tna-heading-m">Contents</h3>
  <ul class="tna-tabs__list" role="tablist">
    <li class="tna-tabs__button-wrapper" role="presentation">
      <a href="#section-a" class="tna-tabs__button" id="section-a-tab" aria-controls="section-a" role="tab">
        <span class="tna-tabs__button-inner">
          This week
        </span>
      </a>
    </li>
    <li class="tna-tabs__button-wrapper" role="presentation">
      <a href="#section-b" class="tna-tabs__button" id="section-b-tab" aria-controls="section-b" role="tab">
        <span class="tna-tabs__button-inner">
          This month
        </span>
      </a>
    </li>
    <li class="tna-tabs__button-wrapper" role="presentation">
      <a href="#section-c" class="tna-tabs__button" id="section-c-tab" aria-controls="section-c" role="tab">
        <span class="tna-tabs__button-inner">
          This year
        </span>
      </a>
    </li>
  </ul>
  <div class="tna-tabs__items">
    <section id="section-a" class="tna-tabs__item">
      <h3 class="tna-tabs__heading tna-heading-m">
        This week
      </h3>
      <p>Lorem ipsum</p>
    </section>
    <section id="section-b" class="tna-tabs__item">
      <h3 class="tna-tabs__heading tna-heading-m">
        This month
      </h3>
      <p>Lorem ipsum</p>
    </section>
    <section id="section-c" class="tna-tabs__item">
      <h3 class="tna-tabs__heading tna-heading-m">
        This year
      </h3>
      <p>Lorem ipsum</p>
    </section>
  </div>
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
tabsTitle	string	A heading to add above the tabs. Only used when JavaScript is not available. Default value: `Contents`
itemHeadingLevel	number	Required. The heading level which represents an element from `<h1>` through to `<h6>` for each of the tab items.
items	array	Required. A list of tab items. See macro options for items.
small	boolean	If `true`, make the tabs smaller. Default value: `false`
activeTabOnLoad	number	If set, the index of the tab to be active on load. Defaults to the first tab. Use `-1` to have no tab active on load. Default value: `0`
allowClose	boolean	If `true`, allow tabs to be closed. Default value: `false`
classes	string	Classes to add to the tabs.
attributes	object	HTML attributes (for example data attributes) to add to the tabs.

Options for items
Name	Type	Description
id	string	Required. A unique ID for the tab item.
title	string	Required. The title of the tab item.
ariaLabel	string	An optional aria-label for the button of the tab item.
tabTitle	string	An optional, shorter heading to use in the tab instead of the `title`.
body	string	Required. The body content of the tab item.
classes	string	Classes to add to the tab item button.
attributes	object	HTML attributes (for example data attributes) to add to the tab item button.

{% from "nationalarchives/components/tabs/macro.njk" import tnaTabs %}

{{ tnaTabs({
  title: "Example tabs",
  itemHeadingLevel: 3,
  items: [
    {
      id: "section-a",
      title: "This week",
      body: '<p>Lorem ipsum</p>'
    },
    {
      id: "section-b",
      title: "This month",
      body: '<p>Lorem ipsum</p>'
    },
    {
      id: "section-c",
      title: "This year",
      body: '<p>Lorem ipsum</p>'
    }
  ]
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy.

{% from "components/tabs/macro.html" import tnaTabs %}

{{ tnaTabs({
  "title": "Example tabs",
  "itemHeadingLevel": 3,
  "items": [
    {
      "id": "section-a",
      "title": "This week",
      "body": '<p>Lorem ipsum</p>'
    },
    {
      "id": "section-b",
      "title": "This month",
      "body": '<p>Lorem ipsum</p>'
    },
    {
      "id": "section-c",
      "title": "This year",
      "body": '<p>Lorem ipsum</p>'
    }
  ]
}) }}

Known issues and gaps

The tabs component currently has a few shortcomings:

If the tab titles are too long, the layout becomes sub-optimal
There is no alternative layout for smaller devices

Component status

Tested without JavaScript: Yes
Tested without CSS: Yes
Passed DAC audit: Yes

This website uses cookies