Skip to main content Skip to list of components
Service phase: Beta

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

Components

Tabs

The tabs component can contain multiple sections of information.

Contents

  1. Component status
  2. 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.

A list of tab items.

See macro options for 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.

A unique ID for the tab item.
title string

Required.

The title of the tab item.
body string

Required.

The body content of the tab item.

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

Jinja

Important information

This is an experimental feature that outputs a Jinja template 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": "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>'
    }
  ]
}) }}

Component status

Phase
Experimental
Tested without JavaScript
In development
Tested without CSS
In development
Passed DAC audit
Not yet audied
Documentation complete
No

Known issues and gaps

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

Back to top