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

Sidebar

The sidebar can be used in a page to provide additional navigation.

Contents

The sidebar component comes in three styles:

Component status

Status
Official (ready to use in production)

Contents

The contents style sidebar is used to show a list of all the top two or three levels of headings in the page, usually the <h2>, <h3> and <h4> elements.

Use this style to help users navigate pages with a large amount of content.

Display this sidebar on the left hand side of the page and make sure that on smaller devices, the sidebar appears above the page to act as a table of contents.

Open this example in new tab

HTML 

<nav class="tna-sidebar tna-sidebar--contents" aria-label="Sidebar">
  <h2 class="tna-sidebar__heading tna-heading-m">
    Contents
  </h2>
  <ul class="tna-sidebar__items">
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Accessibility statement</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Feedback and contact information</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Enforcement procedure</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Compliance status</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Non-accessible content</a>
      <ul class="tna-sidebar__item-children">
        <li class="tna-sidebar__item-child">
          <a href="#" class="tna-sidebar__link">Non-compliance with the accessibility regulations</a>
        </li>
        <li class="tna-sidebar__item-child">
          <a href="#" class="tna-sidebar__link">Disproportionate burden</a>
        </li>
        <li class="tna-sidebar__item-child">
          <a href="#" class="tna-sidebar__link">Content that’s not within the scope of the accessibility regulations</a>
        </li>
      </ul>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Other identified and tracked accessibility concerns</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Testing our products for accessibility</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">How the National Archives Design System team makes their websites accessible</a>
    </li>
  </ul>
</nav>

Nunjucks

Nunjucks options
Primary options
Name Type Description
title string

Required.

The title of the sidebar.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the sidebar title (xl, l, m or s).

Default value: m
items array

Required.

A list of sidebar items.

See macro options for items.
type string

Required.

The type of sidebar style to use. Can be contents, sections or pages.
ariaLabel string

The ARIA label for the sidebar.

Default value: Sidebar
sticky boolean

If true, allows the sidebar to 'stick' to the top of the screen when scrolling.

Default value: false
disableSectionHighlightOnScroll boolean

If true, disables highlighting the current section in the sidebar as the user scrolls. Only applies when type is sections and sticky is true.

Default value: false
classes string

Classes to add to the sidebar.
attributes object

HTML attributes (for example data attributes) to add to the sidebar.
Options for items
Name Type Description
text string

Required.

The text of the sidebar item.
href string

Required.

The URL of the sidebar item.
current boolean

If true, highlight the item as the current page or section.

Default value: false
children array

A list of sidebar child items.

See macro options for children.
classes string

Classes to add to the sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the sidebar item.
Options for children
Name Type Description
text string

Required.

The text of the child sidebar item.
href string

Required.

The URL of the child sidebar item.
children array

A list of sidebar grandchild items.

See macro options for children.
classes string

Classes to add to the child sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the child sidebar item.
Options for children
Name Type Description
text string

Required.

The text of the grandchild sidebar item.
href string

Required.

The URL of the grandchild sidebar item.
classes string

Classes to add to the grandchild sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the grandchild sidebar item.

 
{% from "nationalarchives/components/sidebar/macro.njk" import tnaSidebar %}

{{ tnaSidebar({
  title: "Contents",
  headingLevel: 2,
  items: [
    {
      text: "Accessibility statement",
      href: "#"
    },
    {
      text: "Feedback and contact information",
      href: "#"
    },
    {
      text: "Enforcement procedure",
      href: "#"
    },
    {
      text: "Compliance status",
      href: "#"
    },
    {
      text: "Non-accessible content",
      href: "#",
      children: [
        {
          text: "Non-compliance with the accessibility regulations",
          href: "#"
        },
        {
          text: "Disproportionate burden",
          href: "#"
        },
        {
          text: "Content that’s not within the scope of the accessibility regulations",
          href: "#"
        }
      ]
    },
    {
      text: "Other identified and tracked accessibility concerns",
      href: "#"
    },
    {
      text: "Testing our products for accessibility",
      href: "#"
    },
    {
      text: "How the National Archives Design System team makes their websites accessible",
      href: "#"
    }
  ],
  type: "contents"
}) }}

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/sidebar/macro.html" import tnaSidebar %}

{{ tnaSidebar({
  "title": "Contents",
  "headingLevel": 2,
  "items": [
    {
      "text": "Accessibility statement",
      "href": "#"
    },
    {
      "text": "Feedback and contact information",
      "href": "#"
    },
    {
      "text": "Enforcement procedure",
      "href": "#"
    },
    {
      "text": "Compliance status",
      "href": "#"
    },
    {
      "text": "Non-accessible content",
      "href": "#",
      "children": [
        {
          "text": "Non-compliance with the accessibility regulations",
          "href": "#"
        },
        {
          "text": "Disproportionate burden",
          "href": "#"
        },
        {
          "text": "Content that’s not within the scope of the accessibility regulations",
          "href": "#"
        }
      ]
    },
    {
      "text": "Other identified and tracked accessibility concerns",
      "href": "#"
    },
    {
      "text": "Testing our products for accessibility",
      "href": "#"
    },
    {
      "text": "How the National Archives Design System team makes their websites accessible",
      "href": "#"
    }
  ],
  "type": "contents"
}) }}

Sections

The sections style sidebar provides links to sections of the page and each item can be highlighted to show the current section.

Display this sidebar on the left hand side of the page and make sure that on smaller devices, the sidebar appears above the page to act as a simplified table of contents.

Open this example in new tab

HTML 

<nav class="tna-sidebar tna-sidebar--sections" aria-label="Sidebar">
  <h2 class="tna-sidebar__heading tna-heading-m">
    On this page
  </h2>
  <ul class="tna-sidebar__items">
    <li class="tna-sidebar__item tna-sidebar__item--current">
      <a href="#" class="tna-sidebar__link">A band of guerrillas</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">War begins</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Forming the ERC</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">The fall of Hong Kong</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">The ERC’s guerrilla activities</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Chan Chak’s escape</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Francis Lee and Lieutenant Colonel Ride</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Raymond Wong’s recommendation</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Co-operation between the ERC and BAAG</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">The ERC’s legacy</a>
    </li>
  </ul>
</nav>

Nunjucks

Nunjucks options
Primary options
Name Type Description
title string

Required.

The title of the sidebar.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the sidebar title (xl, l, m or s).

Default value: m
items array

Required.

A list of sidebar items.

See macro options for items.
type string

Required.

The type of sidebar style to use. Can be contents, sections or pages.
ariaLabel string

The ARIA label for the sidebar.

Default value: Sidebar
sticky boolean

If true, allows the sidebar to 'stick' to the top of the screen when scrolling.

Default value: false
disableSectionHighlightOnScroll boolean

If true, disables highlighting the current section in the sidebar as the user scrolls. Only applies when type is sections and sticky is true.

Default value: false
classes string

Classes to add to the sidebar.
attributes object

HTML attributes (for example data attributes) to add to the sidebar.
Options for items
Name Type Description
text string

Required.

The text of the sidebar item.
href string

Required.

The URL of the sidebar item.
current boolean

If true, highlight the item as the current page or section.

Default value: false
children array

A list of sidebar child items.

See macro options for children.
classes string

Classes to add to the sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the sidebar item.
Options for children
Name Type Description
text string

Required.

The text of the child sidebar item.
href string

Required.

The URL of the child sidebar item.
children array

A list of sidebar grandchild items.

See macro options for children.
classes string

Classes to add to the child sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the child sidebar item.
Options for children
Name Type Description
text string

Required.

The text of the grandchild sidebar item.
href string

Required.

The URL of the grandchild sidebar item.
classes string

Classes to add to the grandchild sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the grandchild sidebar item.

 
{% from "nationalarchives/components/sidebar/macro.njk" import tnaSidebar %}

{{ tnaSidebar({
  title: "On this page",
  headingLevel: 2,
  items: [
    {
      text: "A band of guerrillas",
      href: "#",
      current: true
    },
    {
      text: "War begins",
      href: "#"
    },
    {
      text: "Forming the ERC",
      href: "#"
    },
    {
      text: "The fall of Hong Kong",
      href: "#"
    },
    {
      text: "The ERC’s guerrilla activities",
      href: "#"
    },
    {
      text: "Chan Chak’s escape",
      href: "#"
    },
    {
      text: "Francis Lee and Lieutenant Colonel Ride",
      href: "#"
    },
    {
      text: "Raymond Wong’s recommendation",
      href: "#"
    },
    {
      text: "Co-operation between the ERC and BAAG",
      href: "#"
    },
    {
      text: "The ERC’s legacy",
      href: "#"
    }
  ],
  type: "sections"
}) }}

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/sidebar/macro.html" import tnaSidebar %}

{{ tnaSidebar({
  "title": "On this page",
  "headingLevel": 2,
  "items": [
    {
      "text": "A band of guerrillas",
      "href": "#",
      "current": True
    },
    {
      "text": "War begins",
      "href": "#"
    },
    {
      "text": "Forming the ERC",
      "href": "#"
    },
    {
      "text": "The fall of Hong Kong",
      "href": "#"
    },
    {
      "text": "The ERC’s guerrilla activities",
      "href": "#"
    },
    {
      "text": "Chan Chak’s escape",
      "href": "#"
    },
    {
      "text": "Francis Lee and Lieutenant Colonel Ride",
      "href": "#"
    },
    {
      "text": "Raymond Wong’s recommendation",
      "href": "#"
    },
    {
      "text": "Co-operation between the ERC and BAAG",
      "href": "#"
    },
    {
      "text": "The ERC’s legacy",
      "href": "#"
    }
  ],
  "type": "sections"
}) }}

Sticky sections sidebar

When displayed as a sticky sidebar with sticky: true, the sections sidebar will highlight the section currently in view as the user scrolls down.

There are two options available for this functionality: which device sizes highlight the current section and how far from the top of the page the heading should be before it highlights.

By default, the highlighing is shown on large and medium device sizes and disabled on small and tiny devices. This can be changed by adding an attribute of "data-disable-highlight-size": "tiny" to the component (or data-disable-highlight-size="tiny" in HTML) where the value is the device size at which the highlighting is disabled.

The highlighted section is the one that is no more than a certain number of pixels from the top of the page. By default this is 0px but can be set using the attribute "data-scroll-top-threshold": "16" (or data-scroll-top-threshold="16" in HTML). If set to 16, when the element reaches at least 16px from the top of the window, it will be considered the active item.

Open this example in new tab

HTML 

<div class="tna-container tna-!--padding-top-m tna-!--padding-bottom-xl">
  <div class="tna-column tna-column--full tna-!--padding-bottom-m">
    <h1 class="tna-heading-xl">Sections sidebar (sticky)</h1>
  </div>
  <div class="tna-column tna-column--width-1-3 tna-column--full-tiny">
    <nav class="tna-sidebar tna-!--padding-top-s tna-sidebar--sections tna-sidebar--sticky" data-module="tna-sidebar-sections" aria-label="Sidebar" data-disable-highlight-size="tiny" data-scroll-top-threshold="16">
      <h2 class="tna-sidebar__heading tna-heading-m">
        On this page
      </h2>
      <ul class="tna-sidebar__items">
        <li class="tna-sidebar__item">
          <a href="#alpha" class="tna-sidebar__link">Alpha</a>
        </li>
        <li class="tna-sidebar__item">
          <a href="#beta" class="tna-sidebar__link">Beta</a>
        </li>
        <li class="tna-sidebar__item">
          <a href="#gamma" class="tna-sidebar__link">Gamma</a>
        </li>
        <li class="tna-sidebar__item">
          <a href="#delta" class="tna-sidebar__link">Delta</a>
        </li>
        <li class="tna-sidebar__item">
          <a href="#epsilon" class="tna-sidebar__link">Epsilon</a>
        </li>
        <li class="tna-sidebar__item">
          <a href="#zeta" class="tna-sidebar__link">Zeta</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="tna-column tna-column--width-2-3 tna-column--full-tiny tna-!--padding-bottom-xl">
    <h2 class="tna-heading-l tna-!--padding-top-s" id="alpha">Alpha</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <h2 class="tna-heading-l" id="beta">Beta</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <h2 class="tna-heading-l" id="gamma">Gamma</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <h3 class="tna-heading-m" id="gamma-1">Gamma 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <h3 class="tna-heading-m" id="gamma-2">Gamma 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <h3 class="tna-heading-m" id="gamma-3">Gamma 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <h2 class="tna-heading-l" id="delta">Delta</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <h2 class="tna-heading-l" id="epsilon">Epsilon</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <h2 class="tna-heading-l" id="zeta">Zeta</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
title string

Required.

The title of the sidebar.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the sidebar title (xl, l, m or s).

Default value: m
items array

Required.

A list of sidebar items.

See macro options for items.
type string

Required.

The type of sidebar style to use. Can be contents, sections or pages.
ariaLabel string

The ARIA label for the sidebar.

Default value: Sidebar
sticky boolean

If true, allows the sidebar to 'stick' to the top of the screen when scrolling.

Default value: false
disableSectionHighlightOnScroll boolean

If true, disables highlighting the current section in the sidebar as the user scrolls. Only applies when type is sections and sticky is true.

Default value: false
classes string

Classes to add to the sidebar.
attributes object

HTML attributes (for example data attributes) to add to the sidebar.
Options for items
Name Type Description
text string

Required.

The text of the sidebar item.
href string

Required.

The URL of the sidebar item.
current boolean

If true, highlight the item as the current page or section.

Default value: false
children array

A list of sidebar child items.

See macro options for children.
classes string

Classes to add to the sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the sidebar item.
Options for children
Name Type Description
text string

Required.

The text of the child sidebar item.
href string

Required.

The URL of the child sidebar item.
children array

A list of sidebar grandchild items.

See macro options for children.
classes string

Classes to add to the child sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the child sidebar item.
Options for children
Name Type Description
text string

Required.

The text of the grandchild sidebar item.
href string

Required.

The URL of the grandchild sidebar item.
classes string

Classes to add to the grandchild sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the grandchild sidebar item.

 
{% from "nationalarchives/components/sidebar/macro.njk" import tnaSidebar %}

{% set sidebar_items = [
  {
    text: "Alpha",
    href: "#alpha"
  },
  {
    text: "Beta",
    href: "#beta"
  },
  {
    text: "Gamma",
    href: "#gamma",
    children: [
      {
        text: "Gamma 1",
        href: "#gamma-1"
      },
      {
        text: "Gamma 2",
        href: "#gamma-2"
      },
      {
        text: "Gamma 3",
        href: "#gamma-3"
      }
    ]
  },
  {
    text: "Delta",
    href: "#delta"
  },
  {
    text: "Epsilon",
    href: "#epsilon"
  },
  {
    text: "Zeta",
    href: "#zeta"
  }
] %}

<div class="tna-container tna-!--padding-top-m tna-!--padding-bottom-xl">
  <div class="tna-column tna-column--full tna-!--padding-bottom-m">
    <h1 class="tna-heading-xl">Sections sidebar (sticky)</h1>
  </div>
  <div class="tna-column tna-column--width-1-3 tna-column--full-tiny">
    {{ tnaSidebar({
      title: "On this page",
      headingLevel: 2,
      items: sidebar_items,
      type: "sections",
      sticky: true,
      classes: "tna-!--padding-top-s",
      attributes: {
        "data-disable-highlight-size": "tiny",
        "data-scroll-top-threshold": "16"
      }
    }) }}
  </div>
  <div class="tna-column tna-column--width-2-3 tna-column--full-tiny tna-!--padding-bottom-xl">
  {%- for item in sidebar_items %}
    <h2 class="tna-heading-l{{ ' tna-!--padding-top-s' if loop.first else '' }}" id="{{ item.href.substring(1) }}">{{ item.text }}</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    {%- for child in item.children %}
    <h3 class="tna-heading-m" id="{{ child.href.substring(1) }}">{{ child.text }}</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    {%- endfor %}
  {%- endfor %}
  </div>
</div>

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/sidebar/macro.html" import tnaSidebar %}

{% set sidebar_items = [
  {
    "text": "Alpha",
    "href": "#alpha"
  },
  {
    "text": "Beta",
    "href": "#beta"
  },
  {
    "text": "Gamma",
    "href": "#gamma",
    "children": [
      {
        "text": "Gamma 1",
        "href": "#gamma-1"
      },
      {
        "text": "Gamma 2",
        "href": "#gamma-2"
      },
      {
        "text": "Gamma 3",
        "href": "#gamma-3"
      }
    ]
  },
  {
    "text": "Delta",
    "href": "#delta"
  },
  {
    "text": "Epsilon",
    "href": "#epsilon"
  },
  {
    "text": "Zeta",
    "href": "#zeta"
  }
] %}

<div class="tna-container tna-!--padding-top-m tna-!--padding-bottom-xl">
  <div class="tna-column tna-column--full tna-!--padding-bottom-m">
    <h1 class="tna-heading-xl">Sections sidebar (sticky)</h1>
  </div>
  <div class="tna-column tna-column--width-1-3 tna-column--full-tiny">
    {{ tnaSidebar({
      "title": "On this page",
      "headingLevel": 2,
      "items": sidebar_items,
      "type": "sections",
      "sticky": True,
      "classes": "tna-!--padding-top-s",
      "attributes": {
        "data-disable-highlight-size": "tiny",
        "data-scroll-top-threshold": "16"
      }
    }) }}
  </div>
  <div class="tna-column tna-column--width-2-3 tna-column--full-tiny tna-!--padding-bottom-xl">
  {%- for item in sidebar_items %}
    <h2 class="tna-heading-l{{ ' tna-!--padding-top-s' if loop.first else '' }}" id="{{ item.href.substring(1) }}">{{ item.text }}</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    {%- for child in item.children %}
    <h3 class="tna-heading-m" id="{{ child.href.substring(1) }}">{{ child.text }}</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
    {%- endfor %}
  {%- endfor %}
  </div>
</div>

Pages

The pages style sidebar is used to link to other pages such as similar pages in a section of a site.

The current page can be highlighted and also display the top-level headings within it.

Display this sidebar on the right hand side of the page so that on smaller devices, the sidebar appears below the page content to act as an onward journey.

When using the pages sidebar style, consider adding another style sidebar that is only visible at the top of the page on smaller displays to allow users to jump to content on the page.

Open this example in new tab

HTML 

<nav class="tna-sidebar tna-sidebar--pages" aria-label="Sidebar">
  <h2 class="tna-sidebar__heading tna-heading-m">
    Components
  </h2>
  <ul class="tna-sidebar__items">
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Accordion</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Breadcrumbs</a>
    </li>
    <li class="tna-sidebar__item tna-sidebar__item--current">
      <a href="#" class="tna-sidebar__link" aria-current="page">Button</a>
      <ul class="tna-sidebar__item-children">
        <li class="tna-sidebar__item-child">
          <a href="#" class="tna-sidebar__link">Status</a>
        </li>
        <li class="tna-sidebar__item-child">
          <a href="#" class="tna-sidebar__link">Icons</a>
        </li>
        <li class="tna-sidebar__item-child">
          <a href="#" class="tna-sidebar__link">Button groups</a>
        </li>
      </ul>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Card</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Checkboxes</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Compound filters</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Cookie banner</a>
    </li>
    <li class="tna-sidebar__item">
      <a href="#" class="tna-sidebar__link">Date input</a>
    </li>
  </ul>
</nav>

Nunjucks

Nunjucks options
Primary options
Name Type Description
title string

Required.

The title of the sidebar.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the sidebar title (xl, l, m or s).

Default value: m
items array

Required.

A list of sidebar items.

See macro options for items.
type string

Required.

The type of sidebar style to use. Can be contents, sections or pages.
ariaLabel string

The ARIA label for the sidebar.

Default value: Sidebar
sticky boolean

If true, allows the sidebar to 'stick' to the top of the screen when scrolling.

Default value: false
disableSectionHighlightOnScroll boolean

If true, disables highlighting the current section in the sidebar as the user scrolls. Only applies when type is sections and sticky is true.

Default value: false
classes string

Classes to add to the sidebar.
attributes object

HTML attributes (for example data attributes) to add to the sidebar.
Options for items
Name Type Description
text string

Required.

The text of the sidebar item.
href string

Required.

The URL of the sidebar item.
current boolean

If true, highlight the item as the current page or section.

Default value: false
children array

A list of sidebar child items.

See macro options for children.
classes string

Classes to add to the sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the sidebar item.
Options for children
Name Type Description
text string

Required.

The text of the child sidebar item.
href string

Required.

The URL of the child sidebar item.
children array

A list of sidebar grandchild items.

See macro options for children.
classes string

Classes to add to the child sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the child sidebar item.
Options for children
Name Type Description
text string

Required.

The text of the grandchild sidebar item.
href string

Required.

The URL of the grandchild sidebar item.
classes string

Classes to add to the grandchild sidebar item.
attributes object

HTML attributes (for example data attributes) to add to the grandchild sidebar item.

 
{% from "nationalarchives/components/sidebar/macro.njk" import tnaSidebar %}

{{ tnaSidebar({
  title: "Components",
  headingLevel: 2,
  items: [
    {
      text: "Accordion",
      href: "#"
    },
    {
      text: "Breadcrumbs",
      href: "#"
    },
    {
      text: "Button",
      href: "#",
      current: true,
      children: [
        {
          text: "Status",
          href: "#"
        },
        {
          text: "Icons",
          href: "#"
        },
        {
          text: "Button groups",
          href: "#"
        }
      ]
    },
    {
      text: "Card",
      href: "#"
    },
    {
      text: "Checkboxes",
      href: "#"
    },
    {
      text: "Compound filters",
      href: "#"
    },
    {
      text: "Cookie banner",
      href: "#"
    },
    {
      text: "Date input",
      href: "#"
    }
  ],
  type: "pages"
}) }}

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/sidebar/macro.html" import tnaSidebar %}

{{ tnaSidebar({
  "title": "Components",
  "headingLevel": 2,
  "items": [
    {
      "text": "Accordion",
      "href": "#"
    },
    {
      "text": "Breadcrumbs",
      "href": "#"
    },
    {
      "text": "Button",
      "href": "#",
      "current": True,
      "children": [
        {
          "text": "Status",
          "href": "#"
        },
        {
          "text": "Icons",
          "href": "#"
        },
        {
          "text": "Button groups",
          "href": "#"
        }
      ]
    },
    {
      "text": "Card",
      "href": "#"
    },
    {
      "text": "Checkboxes",
      "href": "#"
    },
    {
      "text": "Compound filters",
      "href": "#"
    },
    {
      "text": "Cookie banner",
      "href": "#"
    },
    {
      "text": "Date input",
      "href": "#"
    }
  ],
  "type": "pages"
}) }}

Something not right?

We are working to improve this service and appreciate your input.

Report a problem Provide feedback