Breadcrumbs

On this page

Preview

Breadcrumbs

import { Breadcrumbs } from '@govtech-bb/react';

<Breadcrumbs
  items={[
    { href: '/', label: 'Home' },
    { href: '/travel', label: 'Travel and identification' },
    { href: '/travel/passports', label: 'Passports' },
  ]}
/>;

<nav class="govbb-breadcrumbs" aria-label="Breadcrumb">
  <ol class="govbb-breadcrumbs__list">
    <li class="govbb-breadcrumbs__item">
      <a class="govbb-link govbb-breadcrumbs__link" href="/">Home</a>
    </li>
    <li class="govbb-breadcrumbs__item">
      <a class="govbb-link govbb-breadcrumbs__link" href="/travel">
        Travel and identification
      </a>
    </li>
    <li class="govbb-breadcrumbs__item">
      <a class="govbb-link govbb-breadcrumbs__link" href="/travel/passports"
        >Passports</a
      >
    </li>
  </ol>
</nav>

The Breadcrumbs component shows the pages above the current one in the site hierarchy, starting from the homepage. It does not include the current page: users can see that from the page title. The chevron separators are drawn with CSS, so nothing extra is announced to screen readers.

Usage

When to use

Use breadcrumbs when a page sits several levels deep in a website hierarchy.
Use them when users may arrive on an interior page from search or an external link and need orientation.

When not to use

Do not use breadcrumbs to show progress through a linear service; use the back button.
Do not add them to a flat website or when the same path is already clear from nearby navigation.

Best practices

Reflect the website structure

Start with the homepage and end with the parent of the current page. Use short, recognisable labels that match the destination headings.

Wrap the ordered list in a nav labelled “Breadcrumb”. Keep separators out of the accessible name and mark the current page when it appears in the trail.

Collapsing on mobile

If a deep trail risks crowding a small screen, use the govbb-breadcrumbs--collapse-on-mobile modifier. On mobile it shows only the first and last items in the trail; on larger screens the full trail returns.

Collapsed on mobile

Open in new tab

import { Breadcrumbs } from '@govtech-bb/react';

<Breadcrumbs
  collapseOnMobile
  items={[
    { href: '/', label: 'Home' },
    { href: '/business', label: 'Business' },
    { href: '/business/licences', label: 'Licences' },
    { href: '/business/licences/liquor', label: 'Liquor licences' },
  ]}
/>;

<nav
  class="govbb-breadcrumbs govbb-breadcrumbs--collapse-on-mobile"
  aria-label="Breadcrumb"
>
  <ol class="govbb-breadcrumbs__list">
    <li class="govbb-breadcrumbs__item">
      <a class="govbb-link govbb-breadcrumbs__link" href="/">Home</a>
    </li>
    <li class="govbb-breadcrumbs__item">
      <a class="govbb-link govbb-breadcrumbs__link" href="/business"
        >Business</a
      >
    </li>
    <li class="govbb-breadcrumbs__item">
      <a class="govbb-link govbb-breadcrumbs__link" href="/business/licences"
        >Licences</a
      >
    </li>
    <li class="govbb-breadcrumbs__item">
      <a
        class="govbb-link govbb-breadcrumbs__link"
        href="/business/licences/liquor"
      >
        Liquor licences
      </a>
    </li>
  </ol>
</nav>