Skip to main content Skip to list of components
Beta

This is a new service – give us your feedback to help improve it.

Components

Tabs

The tabs component can contain multiple tabs of information.

Contents

  1. Status
  2. Without JavaScript
  3. Without CSS
  4. Without CSS or JavaScript
  5. Known issues and gaps
Open this example in new tab

HTML 

<div class="tna-tabs" data-module="tna-tabs">
  <div class="tna-tabs__list" role="tablist" hidden>
    <button type="button" class="tna-tabs__button" id="section-a-tab" aria-controls="section-a" role="tab">
      <span class="tna-tabs__button-inner">
        Alpha
      </span>
    </button>
    <button type="button" class="tna-tabs__button" id="section-b-tab" aria-controls="section-b" role="tab">
      <span class="tna-tabs__button-inner">
        Beta
      </span>
    </button>
    <button type="button" class="tna-tabs__button" id="section-c-tab" aria-controls="section-c" role="tab">
      <span class="tna-tabs__button-inner">
        Gamma
      </span>
    </button>
  </div>
  <div class="tna-tabs__items">
    <section id="section-a" class="tna-tabs__item">
      <h3 class="tna-tabs__heading tna-heading-m">
        Alpha
      </h3>
      <p>Lorem ipsum</p>
    </section>
    <section id="section-b" class="tna-tabs__item">
      <h3 class="tna-tabs__heading tna-heading-m">
        Beta
      </h3>
      <p>Lorem ipsum</p>
    </section>
    <section id="section-c" class="tna-tabs__item">
      <h3 class="tna-tabs__heading tna-heading-m">
        Gamma
      </h3>
      <p>Lorem ipsum</p>
    </section>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
itemHeadingLevel number

Required.

The heading level which represents an element from <h1> through to <h6> for each of the tab items.
items array

Required.

See items.
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.

title string

Required.

body string

Required. 

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

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

Status

Status
In development
Tested without JavaScript
In development
Tested without CSS
In development
WCAG 2.2 AA compliant
In development
Analytics integrated
Documentation complete
No

Without JavaScript

Open this example in new tab

Without CSS

Open this example in new tab

Without CSS or JavaScript

Open this example in new tab

Known issues and gaps

The tabs component currently has a few shortcomings that mean it shouldn’t be relied upon.

Back to top