Breadcrumbs

Breadcrumbs are a type of navigation menu, typically displayed as a row of links, which resemble a file path to the current page.

The last item in our breadcrumbs component represents the current page. However, you might see other implementations on the web where the breadcrumbs only show previous pages and the current page is omitted.

<nav class="tl-breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li>
      <div>
        <a href="/">
          Home
        </a>
      </div>
    </li>

    <li>
      <div>
        <a href="/about">
          About
        </a>
      </div>
    </li>

    <li>
      <div>
        <a href="/about/team" aria-current="page">
          Team
        </a>
      </div>
    </li>
  </ol>
</nav>

/* -------------------------------------------------------------------------- */
/* Breadcrumbs                                                                */
/* -------------------------------------------------------------------------- */

.tl-breadcrumbs {
  --colour-link-text: var(--tl-colour-text-link, #7f238b);
  --colour-link-text-current: var(--tl-colour-text, #222222);
  --colour-link-accent-current: var(--tl-colour-accent, #cc0092);
  --colour-link-text-hover: var(--tl-colour-text-link-hover, #7f238b);
  --colour-background: var(--tl-colour-surface, #f0f0eb);
  --colour-separator: var(--tl-colour-text, #222222);
  --colour-focus-highlight: var(--tl-colour-highlight-focus, #7f238b);
  --colour-focus-contrasting: var(--tl-colour-contrasting-focus, #ffffff);
}

nav.tl-breadcrumbs {
  padding: 0.5rem;
  background-color: var(--colour-background);
}

nav.tl-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1em;
  padding: 0;
  margin: 0;
  list-style: none;
}

nav.tl-breadcrumbs li {
  align-self: center;
}

nav.tl-breadcrumbs div {
  display: flex;
  align-items: center;
}

nav.tl-breadcrumbs div::before {
  display: block;
  flex-shrink: 0;
  block-size: 0.8em;
  margin-inline-end: 1rem;
  color: var(--colour-separator);
  content: "";
  border-inline-end: 0.1em solid currentcolor;
  transform: rotate(15deg);
}

nav.tl-breadcrumbs li:first-of-type div::before {
  display: none;
}

nav.tl-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  color: var(--colour-link-text);
}

/* State styles */
nav.tl-breadcrumbs a:visited {
  color: var(--colour-link-text);
}

nav.tl-breadcrumbs a[aria-current="page"] {
  font-weight: bold;
  color: var(--colour-link-text-current);
  text-decoration-thickness: 0.2em;
  text-decoration-color: var(--colour-link-accent-current);
  text-underline-offset: 0.2em;
}

nav.tl-breadcrumbs a:focus-visible {
  outline: 3px solid var(--colour-focus-highlight);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--colour-focus-contrasting);
}

nav.tl-breadcrumbs a:hover,
nav.tl-breadcrumbs a:visited:hover {
  color: var(--colour-link-text-hover);
}

What problems it solves

The breadcrumbs component helps people orientate themselves by providing a clear location within a set of web pages. This helps them to avoid getting lost in deeply nested content, and to easily retrace their steps from their current position.

When to use it

Use the breadcrumbs component when you have several layers of nested content and there is a clear parent/child relationship between pages or sections. For example, technical documentation where you can drill down several times into more granular sections.

When not to use it

Do not use the breadcrumbs component for:

Primary navigation, step-by-step user journeys or content filters
Flat or shallow content structures
Content structures which are inconsistent or unrelated

Where to use it

Breadcrumbs are typically positioned near the top of a page, just below the <header> and above the <main> section. This placement ensures that "skip to" links bypass both the breadcrumb navigation and other navigational elements that may be repeated across pages.

How it works

The breadcrumbs are basically just an ordered list of links with some additional semantics. The list uses a native <ol> element, but also includes the attribute role="list", due to Safari removing list semantics when the list marker is missing in the compatibility notes.

Assistive technology compatibility

This component has been tested with the following browsers and assistive technologies.

Assistive technology	Result	Notes
Keyboard	No issues	No notes
Voice Access/Chrome 154.0.8/Windows 11	No issues	No notes
JAWS 2026.2603.86/Chrome 154.0.8/Windows 11	No issues	No notes
NVDA 2026.1.1/Firefox 157.0/Windows 11	No issues	No notes
VoiceOver/Safari macOS Tahoe 26.6	No issues	No notes
VoiceOver/Safari/iOS 26.0	No issues	No notes
TalkBack/Chrome 154.0.8/Android 17	No issues	No notes
Windows Contrast themes	No issues	No notes
Windows Magnifier and/or Apple Zoom	No issues	No notes
Browser zoom	No issues	No notes
prefers-reduced-motion	Not applicable	There are no animations to reduce

Last updated: 13 October 2026.