Components

Sidebar

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

Status
Contents
Sections
Pages

The sidebar component comes in three styles:

Contents
Sections
Pages

Status

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

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.
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: `m`
items	array	Required. See items.
type	string	Required. The type of sidebar style to use. Can be `contents`, `sections` or `pages`.
sticky	boolean
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.
href	string	Required.
current	boolean
children	array	See children.

Options for children
Name	Type	Description
text	string	Required.
href	string	Required.

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

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&#39;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&#39;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&#39;s legacy</a>
    </li>
  </ul>
</nav>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
title	string	Required.
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: `m`
items	array	Required. See items.
type	string	Required. The type of sidebar style to use. Can be `contents`, `sections` or `pages`.
sticky	boolean
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.
href	string	Required.
current	boolean
children	array	See children.

Options for children
Name	Type	Description
text	string	Required.
href	string	Required.

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

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.
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: `m`
items	array	Required. See items.
type	string	Required. The type of sidebar style to use. Can be `contents`, `sections` or `pages`.
sticky	boolean
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.
href	string	Required.
current	boolean
children	array	See children.

Options for children
Name	Type	Description
text	string	Required.
href	string	Required.

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

This website uses cookies

Sidebar

Contents

Status

Contents

HTML

Nunjucks

Sections

HTML

Nunjucks

Pages

HTML

Nunjucks