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

Breadcrumbs

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

Contents

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

Open this example in new tab

HTML 

<nav class="tna-breadcrumbs" data-module="tna-breadcrumbs" aria-label="Example breadcrumbs component">
  <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 macro options for items.
noCollapse boolean

When true, the breadcrumbs will not collapse to the first and last item only on smaller devices.

Default value: false
labelText string

A custom value to use as the aria-label.

Default value: 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"
    }
  ],
  labelText: "Example breadcrumbs component"
}) }}

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

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

Component status

Status
Official (ready to use in production)

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="Example breadcrumbs component that doesn’t collapse">
  <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 macro options for items.
noCollapse boolean

When true, the breadcrumbs will not collapse to the first and last item only on smaller devices.

Default value: false
labelText string

A custom value to use as the aria-label.

Default value: 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"
    }
  ],
  labelText: "Example breadcrumbs component that doesn’t collapse",
  noCollapse: true
}) }}

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

{{ tnaBreadcrumbs({
  "items": [
    {
      "text": "Alpha",
      "href": "#/alpha"
    },
    {
      "text": "Beta",
      "href": "#/beta"
    },
    {
      "text": "Gamma",
      "href": "#/gamma"
    },
    {
      "text": "Delta",
      "href": "#/delta"
    },
    {
      "text": "Epsilon",
      "href": "#/epsilon"
    }
  ],
  "labelText": "Example breadcrumbs component that doesn’t collapse",
  "noCollapse": True
}) }}

Something not right?

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

Report a problem Provide feedback Suggest an edit