Components

Sidebar

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

Component status
Styles
Contents
Sections
Pages

Component status

Phase: Official (ready to use in production)

Styles

The sidebar component comes in three styles:

Contents
Sections
Pages

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 a large amount of content.

An example of a page with a content sidebar is the accessibility statement of this Design System.

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`.
sticky	boolean	If `true`, allows the sidebar to 'stick' to the top of the screen when scrolling.
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.
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 that outputs a Jinja template 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.

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`.
sticky	boolean	If `true`, allows the sidebar to 'stick' to the top of the screen when scrolling.
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.
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 that outputs a Jinja template 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.

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">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`.
sticky	boolean	If `true`, allows the sidebar to 'stick' to the top of the screen when scrolling.
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.
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 that outputs a Jinja template 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"
}) }}

This website uses cookies

Sidebar

Contents

Component status

Styles

Contents

HTML

Nunjucks

Jinja

Important information!

Sections

HTML

Nunjucks

Jinja

Important information!

Pages

HTML

Nunjucks

Jinja

Important information!

Important information

Important information

Important information