Breadcrumbs

On this page

Breadcrumbs

Breadcrumbs show users the current location on the website and enable them to quickly move up to a parent level.

When to use

Use breadcrumbs when a page is located in a hierarchy of at least two levels.

When not to use

Do not use breadcrumbs on a website with a flat hierarchy or to show the journey through a transaction. If a page is taking users through a multistep process, use the “Step-by-step Sidebar Navigation” (or consider if a progress indicator is needed instead).

How it works

Breadcrumbs should be placed on the top left of each page and below the global navigation. They should start with a link to the home page and end with the current page title. Page titles of parent pages should be linked; the current should not have a link. Note that you will have to add the ‘Home’ link into the links you pass in.

On the small breakpoint, breadcrumbs show the previous parent level as a link by default. You can explicity set this behaviour by passing in
collaspe as the type.

Note: the breadcrumbs component on the small breakpoint is currently experimental because more research is needed to validate it.

Accessibility

Keyboard

Users should be able to tab between all links using their keyboard.

Screen reader

Make sure your breadcrumb items reflect the page titles exactly for screen readers.

Site level breadcrumbs

When breadcrumbs are displayed across the top of site content they are wrapped in a .cads-breadcrumb-wrapper.

Open example in a new tab 
<div class="cads-breadcrumbs-wrapper">
  <nav class="cads-breadcrumbs cads-breadcrumbs--collapse" aria-label="breadcrumbs">
    <ul class="cads-breadcrumbs__list">
      <li class="cads-breadcrumbs__crumb">
        <a href="#" class="cads-breadcrumb">Home</a>
      </li>
      <li class="cads-breadcrumbs__crumb">
        <a href="#" class="cads-breadcrumb">Immigration</a>
      </li>
      <li class="cads-breadcrumbs__crumb">
        <span class="cads-breadcrumb" aria-current="location">Staying in the UK</span>
      </li>
    </ul>
  </nav>
</div>
<%= render CitizensAdviceComponents::Breadcrumbs.new(
  [
    { title: "Home", url: "#" },
    { title: "Immigration", url: "#" },
    { title: "Staying in the UK" }
  ]
) %>

Variations

No collapse

Prevents the default collapse behaviour on the small breakpoint (for example in search results).

Open example in a new tab 
<div class="cads-breadcrumbs-wrapper">
  <nav class="cads-breadcrumbs cads-breadcrumbs--no-collapse" aria-label="breadcrumbs">
    <ul class="cads-breadcrumbs__list">
      <li class="cads-breadcrumbs__crumb">
        <a href="#" class="cads-breadcrumb">Home</a>
      </li>
      <li class="cads-breadcrumbs__crumb">
        <a href="#" class="cads-breadcrumb">Immigration</a>
      </li>
      <li class="cads-breadcrumbs__crumb">
        <span class="cads-breadcrumb" aria-current="location">Staying in the UK</span>
      </li>
    </ul>
  </nav>
</div>
<%= render CitizensAdviceComponents::Breadcrumbs.new(
  [
    { title: "Home", url: "#" },
    { title: "Immigration", url: "#" },
    { title: "Staying in the UK" }
  ],
  type: :no_collapse
) %>

Long page titles in breadcrumbs

This example shows how longer breadcrumb titles are displayed.

Open example in a new tab 
<div class="cads-breadcrumbs-wrapper">
  <nav class="cads-breadcrumbs cads-breadcrumbs--collapse" aria-label="breadcrumbs">
    <ul class="cads-breadcrumbs__list">
      <li class="cads-breadcrumbs__crumb">
        <a href="/" class="cads-breadcrumb">Home</a>
      </li>
      <li class="cads-breadcrumbs__crumb">
        <a href="#" class="cads-breadcrumb">My Grandmother Asked Me to Tell You She’s Sorry</a>
      </li>
      <li class="cads-breadcrumbs__crumb">
        <a href="#" class="cads-breadcrumb">The Curious Incident of the Dog in the Night-Time</a>
      </li>
      <li class="cads-breadcrumbs__crumb">
        <a href="#" class="cads-breadcrumb">Fried Green Tomatoes at the Whistle Stop Cafe</a>
      </li>
      <li class="cads-breadcrumbs__crumb">
        <span class="cads-breadcrumb" aria-current="location">Eleanor Oliphant is Completely Fine</span>
      </li>
    </ul>
  </nav>
</div>
<%= render CitizensAdviceComponents::Breadcrumbs.new(
  [{
    title: "Home",
    url: "/"
  }, {
    title: "My Grandmother Asked Me to Tell You She’s Sorry",
    url: "#"
  }, {
    title: "The Curious Incident of the Dog in the Night-Time",
    url: "#"
  }, {
    title: "Fried Green Tomatoes at the Whistle Stop Cafe",
    url: "#"
  }, {
    title: "Eleanor Oliphant is Completely Fine"
  }]
) %>

Not full width

Used when the breadcrumb should not be full width, as in a search result. This will prevent the default wrapping behaviour mentioned above.

Open example in a new tab 
<nav class="cads-breadcrumbs cads-breadcrumbs--no-collapse" aria-label="breadcrumbs">
  <ul class="cads-breadcrumbs__list">
    <li class="cads-breadcrumbs__crumb">
      <a href="#" class="cads-breadcrumb">Home</a>
    </li>
    <li class="cads-breadcrumbs__crumb">
      <a href="#" class="cads-breadcrumb">My Grandmother Asked Me to Tell You She’s Sorry</a>
    </li>
    <li class="cads-breadcrumbs__crumb">
      <a href="#" class="cads-breadcrumb">The Curious Incident of the Dog in the Night-Time</a>
    </li>
    <li class="cads-breadcrumbs__crumb">
      <a href="#" class="cads-breadcrumb">Fried Green Tomatoes at the Whistle Stop Cafe</a>
    </li>
    <li class="cads-breadcrumbs__crumb">
      <span class="cads-breadcrumb" aria-current="location">Eleanor Oliphant is Completely Fine</span>
    </li>
  </ul>
</nav>
<%= render CitizensAdviceComponents::Breadcrumbs.new(
  [{
    title: "Home",
    url: "#"
  }, {
    title: "My Grandmother Asked Me to Tell You She’s Sorry",
    url: "#"
  }, {
    title: "The Curious Incident of the Dog in the Night-Time",
    url: "#"
  }, {
    title: "Fried Green Tomatoes at the Whistle Stop Cafe",
    url: "#"
  }, {
    title: "Eleanor Oliphant is Completely Fine"
  }],
  type: :no_collapse,
  full_width: false
) %>

Not indicating the current page

If you do not want the last crumb to indicate the current page (for screen readers etc), you can pass in current_page: false.

Open example in a new tab 
<div class="cads-breadcrumbs-wrapper">
  <nav class="cads-breadcrumbs cads-breadcrumbs--no-collapse" aria-label="breadcrumbs">
    <ul class="cads-breadcrumbs__list">
      <li class="cads-breadcrumbs__crumb">
        <a href="#" class="cads-breadcrumb">Home</a>
      </li>
      <li class="cads-breadcrumbs__crumb">
        <a href="#" class="cads-breadcrumb">Immigration</a>
      </li>
      <li class="cads-breadcrumbs__crumb">
        <span class="cads-breadcrumb">Staying in the UK</span>
      </li>
    </ul>
  </nav>
</div>
<%= render CitizensAdviceComponents::Breadcrumbs.new(
  [
    { title: "Home", url: "#" },
    { title: "Immigration", url: "#" },
    { title: "Staying in the UK" }
  ],
  type: :no_collapse,
  current_page: false
) %>

Using with Rails

If you are using the citizens_advice_components gem there is a view component interface provided. For the default use-case of rendering a global breadcrumb trail we provide some helpers so that breadcrumbs can be rendered with this one-liner:

<% render CitizensAdviceComponents::Breadcrumbs.new(cads_breadcrumbs) %%>

See the Using with Rails for more information about how the helper works. If you using the component for anything custom you can populate the links manually:

<%= render CitizensAdviceComponents::Breadcrumbs.new(
  [
    { title: "Home", url: "#" },
    { title: "Immigration", url: "#" },
    { title: "Staying in the UK" }
  ]
) %>

The component accepts an array of links with a url and title properties, in addition to the following optional component arguments:

Component arguments
Argument Description
Argument type Description Optional, one of :collapse (default), :no_collapse
Argument current_page Description Optional, will render aria-location=current on last crumb if true. Defaults to true.
Argument full_width Description Optional, will wrap breadcrumbs in the .cads-breadcrumbs-wrapper div if true. Defaults to true.