skip to content

Breadcrumbs

Use the Breadcrumbs component when the site structure is several levels deep and a secondary wayfinding mechanism (in addition to the Header’s navigation links) may be useful.

Unlike Sub-navigation, breadcrumbs represent levels of depth reading from left to right. Use Sub-navigation where each link represents a topic belonging to the same level.

Light theme

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

Since breadcrumbs constitute a kind of navigation, a <nav> element is required, along with a descriptive label using aria-label. The current page (the final breadcrumb) should be unlinked.

<nav class="ds-breadcrumbs" aria-label="Where you are">
  <ol>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/elections">Elections</a>
    </li>
    <li>
      Cheltenham local election
    </li>
  </ol>
</nav>