Breadcrumbs

A breadcrumb shows a user where they are in a website’s structure. It also presents links to pages higher in the site’s structure, such as a home page.

<nav aria-label="Breadcrumb">
    <ol class="ds_breadcrumbs">
        <li class="ds_breadcrumbs__item">
            <a class="ds_breadcrumbs__link" href="#">
                Home
            </a>
        </li>
        
        <li class="ds_breadcrumbs__item">
            <a class="ds_breadcrumbs__link" href="#">
                Justice and the law
            </a>
        </li>
        
        <li class="ds_breadcrumbs__item">
            <a class="ds_breadcrumbs__link" href="#">
                Your rights and the law
            </a>
        </li>

        <li class="ds_breadcrumbs__item" aria-current="page">
            Data sharing of personal information
        </li>
    </ol>
</nav>

About this component

The breadcrumbs component should:

• be used if a website has 2 or more levels in its structure
• include the user’s current page
• display the current page item in a clearly different style from the other items in the breadcrumbs

You might not need a breadcrumbs component if the website has a top level navigation, such as a meganav or global navigation.

You should omit the breadcrumbs component from parts of a website where a user needs to go through pages in a certain order. This includes things like online forms and multi-page calculators.

Why we use this component

Breadcrumbs are online best practice for supporting user navigation.

Evidence

There is evidence from mygov.scot that users interact with the breadcrumbs more than other forms of navigation, for example in-page panel links or the back swipe button.

Variants

Where there may be issues with repetition or page titles are too long, a version of breadcrumbs which do not include the current page can be used. In these cases keep the current page available to screen readers through the use of the visually-hidden CSS class.

<nav aria-label="Breadcrumb">
    <ol class="ds_breadcrumbs">
        <li class="ds_breadcrumbs__item">
            <a class="ds_breadcrumbs__link" href="#">
                Home
            </a>
        </li>
        
        <li class="ds_breadcrumbs__item">
            <a class="ds_breadcrumbs__link" href="#">
                Justice and the law
            </a>
        </li>
        
        <li class="ds_breadcrumbs__item">
            <a class="ds_breadcrumbs__link" href="#">
                Your rights and the law
            </a>
        </li>

        <li class="ds_breadcrumbs__item  visually-hidden" aria-current="page">
            An incredibly long nonsense title, as an example of a problematically long title, for demonstration purposes only
        </li>
    </ol>
</nav>

Website analytics

To understand user behaviour, clicks on breadcrumb items can be tracked through the original page path, the click URL, the click text, and a data attribute showing the item number.

The data attribute is added automatically by the Design System’s ‘tracking’ script.

You should include a Schema representation of the breadcrumbs. One useful benefit of using Schema representation is that it allows a breadcrumb trail to be accurately displayed on search engines and will help users navigate the structure of your site.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "https://www.mygov.scot/",
        "name": "Home"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@id": "https://www.mygov.scot/environment-farm-marine/",
        "name": "Environment, farming and marine"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item": {
        "@id": "https://www.mygov.scot/environment-farm-marine/countryside/",
        "name": "Environment and countryside"
      }
    }
  ]
}
</script>

This Google structured data guidance for breadcrumbs is a helpful reference.

Accessibility

• Use of a nav element with aria-label="breadcrumb" is recommended. You can find out more about this on GitHub.
• This breadcrumb component contains all the accessibility features for breadcrumbs described in WAI-ARIA’s authoring practices for breadcrumbs.
• W3C may also be useful.
• You should make sure that separators between breadcrumb items are not read by screen readers and avoid using font glyphs for them – these can cause accessibility problems.