Components

Breadcrumbs

Breadcrumbs help users to understand where they are within a websites structure and move between levels.

Status
When to use this component
When not to use this component
How it works
Breadcrumbs on smaller devices
Using structured data

The breadcrumbs component is also known as navigation path or cookie crumb.

HTML

<nav class="tna-breadcrumbs" data-module="tna-breadcrumbs" aria-label="Breadcrumbs">
  <ol class="tna-breadcrumbs__list">
    <li class="tna-breadcrumbs__item">
      <a href="#/alpha" class="tna-breadcrumbs__link">
        Alpha
      </a>
    </li>
    <li class="tna-breadcrumbs__item">
      <a href="#/beta" class="tna-breadcrumbs__link">
        Beta
      </a>
    </li>
    <li class="tna-breadcrumbs__item">
      <a href="#/gamma" class="tna-breadcrumbs__link">
        Gamma
      </a>
    </li>
    <li class="tna-breadcrumbs__item">
      <a href="#/delta" class="tna-breadcrumbs__link">
        Delta
      </a>
    </li>
    <li class="tna-breadcrumbs__item">
      <a href="#/epsilon" class="tna-breadcrumbs__link">
        Epsilon
      </a>
    </li>
  </ol>
</nav>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
items	array	Required. The items within breadcrumbs. See items.
noCollapse	boolean	When true, the breadcrumbs will not collapse to the first and last item only on smaller devices.
structuredData	boolean	When true, structured data markup is added to the breadcrumbs.
classes	string	Classes to add to the breadcrumbs.
attributes	object	HTML attributes (for example data attributes) to add to the breadcrumbs.

Options for items
Name	Type	Description
text	string	Required. Text to use within the breadcrumbs item.
href	string	Required. Link for the breadcrumbs item.
title	string	Optional title for the breadcrumb item used in the title attribute.

{% from "nationalarchives/components/breadcrumbs/macro.njk" import tnaBreadcrumbs %}

{{ tnaBreadcrumbs({
  items: [
    {
      text: "Alpha",
      href: "#/alpha"
    },
    {
      text: "Beta",
      href: "#/beta"
    },
    {
      text: "Gamma",
      href: "#/gamma"
    },
    {
      text: "Delta",
      href: "#/delta"
    },
    {
      text: "Epsilon",
      href: "#/epsilon"
    }
  ]
}) }}

Status

Status: Ready for production
Tested without JavaScript: Yes
Tested without CSS: Yes
WCAG 2.2 AA compliant: Yes
Analytics integrated: In development
Documentation complete: Yes

When to use this component

Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website.

When not to use this component

Do not use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction.

If you’re using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.

How it works

Always place breadcrumbs at the top of a page, before the <main> element. Placing them here means that the ‘Skip to main content’ link allows the user to skip all navigation links, including breadcrumbs.

The breadcrumbs should start with your ‘home’ page and end with the parent section of the current page.

Breadcrumbs on smaller devices

By default, the breadcrumbs will collapse on smaller devices to only show the first and last items with an option to expand them.

You can configure the breadcrumbs to never collapse by setting the noCollapse option to true or by adding the class tna-breadcrumbs--no-collapse to the main breadcrumbs element.

Open this example in new tab

HTML

<nav class="tna-breadcrumbs tna-breadcrumbs--no-collapse" data-module="tna-breadcrumbs" aria-label="Breadcrumbs">
  <ol class="tna-breadcrumbs__list">
    <li class="tna-breadcrumbs__item">
      <a href="#/alpha" class="tna-breadcrumbs__link">
        Alpha
      </a>
    </li>
    <li class="tna-breadcrumbs__item">
      <a href="#/beta" class="tna-breadcrumbs__link">
        Beta
      </a>
    </li>
    <li class="tna-breadcrumbs__item">
      <a href="#/gamma" class="tna-breadcrumbs__link">
        Gamma
      </a>
    </li>
    <li class="tna-breadcrumbs__item">
      <a href="#/delta" class="tna-breadcrumbs__link">
        Delta
      </a>
    </li>
    <li class="tna-breadcrumbs__item">
      <a href="#/epsilon" class="tna-breadcrumbs__link">
        Epsilon
      </a>
    </li>
  </ol>
</nav>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
items	array	Required. The items within breadcrumbs. See items.
noCollapse	boolean	When true, the breadcrumbs will not collapse to the first and last item only on smaller devices.
structuredData	boolean	When true, structured data markup is added to the breadcrumbs.
classes	string	Classes to add to the breadcrumbs.
attributes	object	HTML attributes (for example data attributes) to add to the breadcrumbs.

Options for items
Name	Type	Description
text	string	Required. Text to use within the breadcrumbs item.
href	string	Required. Link for the breadcrumbs item.
title	string	Optional title for the breadcrumb item used in the title attribute.

{% from "nationalarchives/components/breadcrumbs/macro.njk" import tnaBreadcrumbs %}

{{ tnaBreadcrumbs({
  items: [
    {
      text: "Alpha",
      href: "#/alpha"
    },
    {
      text: "Beta",
      href: "#/beta"
    },
    {
      text: "Gamma",
      href: "#/gamma"
    },
    {
      text: "Delta",
      href: "#/delta"
    },
    {
      text: "Epsilon",
      href: "#/epsilon"
    }
  ],
  noCollapse: true
}) }}

Using structured data

Enable structured data by setting the structuredData option to true. This will output additional markup that allows search engines to parse more information about your page.

Google provides ways to test your structured data.

Open this example in new tab

HTML

<nav class="tna-breadcrumbs" data-module="tna-breadcrumbs" aria-label="Breadcrumbs">
  <ol class="tna-breadcrumbs__list" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li class="tna-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="#/alpha" class="tna-breadcrumbs__link" itemprop="item">
        <span itemprop="name">Alpha</span>
      </a>
      <meta itemprop="position" content="1">
    </li>
    <li class="tna-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="#/beta" class="tna-breadcrumbs__link" itemprop="item">
        <span itemprop="name">Beta</span>
      </a>
      <meta itemprop="position" content="2">
    </li>
    <li class="tna-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="#/gamma" class="tna-breadcrumbs__link" itemprop="item">
        <span itemprop="name">Gamma</span>
      </a>
      <meta itemprop="position" content="3">
    </li>
    <li class="tna-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="#/delta" class="tna-breadcrumbs__link" itemprop="item">
        <span itemprop="name">Delta</span>
      </a>
      <meta itemprop="position" content="4">
    </li>
    <li class="tna-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="#/epsilon" class="tna-breadcrumbs__link" itemprop="item">
        <span itemprop="name">Epsilon</span>
      </a>
      <meta itemprop="position" content="5">
    </li>
  </ol>
</nav>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
items	array	Required. The items within breadcrumbs. See items.
noCollapse	boolean	When true, the breadcrumbs will not collapse to the first and last item only on smaller devices.
structuredData	boolean	When true, structured data markup is added to the breadcrumbs.
classes	string	Classes to add to the breadcrumbs.
attributes	object	HTML attributes (for example data attributes) to add to the breadcrumbs.

Options for items
Name	Type	Description
text	string	Required. Text to use within the breadcrumbs item.
href	string	Required. Link for the breadcrumbs item.
title	string	Optional title for the breadcrumb item used in the title attribute.

{% from "nationalarchives/components/breadcrumbs/macro.njk" import tnaBreadcrumbs %}

{{ tnaBreadcrumbs({
  items: [
    {
      text: "Alpha",
      href: "#/alpha"
    },
    {
      text: "Beta",
      href: "#/beta"
    },
    {
      text: "Gamma",
      href: "#/gamma"
    },
    {
      text: "Delta",
      href: "#/delta"
    },
    {
      text: "Epsilon",
      href: "#/epsilon"
    }
  ],
  structuredData: true
}) }}

This website uses cookies

Breadcrumbs

Contents

HTML

Nunjucks

Status

When to use this component

When not to use this component

How it works

Breadcrumbs on smaller devices

HTML

Nunjucks

Using structured data

HTML

Nunjucks