Components

Sidebar

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

Component status
Contents
Sections
Pages
Whole page examples

The sidebar component comes in three styles:

Contents
Sections
Pages

Component status

Status: Official (ready to use in production)

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.

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.

{% 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.

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.

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

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.

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.

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

Whole page examples

Open this example in new tab

This website uses cookies

Sidebar

Contents

Component status

Contents

HTML

Nunjucks

Jinja

Important information!

Sections

HTML

Nunjucks

Jinja

Important information!

Pages

HTML

Nunjucks

Jinja

Important information!

Whole page examples

Important information

Important information

Important information