Breadcrumbs

The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.

Always place breadcrumbs at the top of a page, before the <main> element. Placing them here means that the ‘Skip to main content’ link allows the user to skip all navigation links, including breadcrumbs.

Breadcrumbs with default arguments

Breadcrumbs need to be provided in a Hash where the keys are the page name and the values are the path.

Input

= govuk_breadcrumbs(breadcrumbs: breadcrumbs)

<%= govuk_breadcrumbs(breadcrumbs: breadcrumbs) %>

{ breadcrumbs: { "Home" => "/", "Level one page" => "/", "Level two page" => "/" } }

Output

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item"><a class="govuk-breadcrumbs__link" href="/">Home</a></li>
    <li class="govuk-breadcrumbs__list-item"><a class="govuk-breadcrumbs__link" href="/">Level one page</a></li>
    <li class="govuk-breadcrumbs__list-item"><a class="govuk-breadcrumbs__link" href="/">Level two page</a></li>
  </ol>
</div>

Breadcrumbs that collapse on mobile

If you have long breadcrumbs, you can configure the component to only show the first and last items on mobile devices.

Input

= govuk_breadcrumbs(breadcrumbs: breadcrumbs, collapse_on_mobile: true)

p.govuk-inset-text If you make this page narrower the inner breadcrumbs will be hiddden.

<%= govuk_breadcrumbs(breadcrumbs: breadcrumbs, collapse_on_mobile: true) %>
<p class="govuk-inset-text">If you make this page narrower the inner breadcrumbs will be hiddden.</p>

{
  breadcrumbs: {
    "Home" => "/",
    "Level one page" => "/",
    "Level two page" => "/",
    "Level three page" => "/",
    "Level four page" => "/",
  }
}

Output

If you make this page narrower the inner breadcrumbs will be hiddden.

<div class="govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item"><a class="govuk-breadcrumbs__link" href="/">Home</a></li>
    <li class="govuk-breadcrumbs__list-item"><a class="govuk-breadcrumbs__link" href="/">Level one page</a></li>
    <li class="govuk-breadcrumbs__list-item"><a class="govuk-breadcrumbs__link" href="/">Level two page</a></li>
    <li class="govuk-breadcrumbs__list-item"><a class="govuk-breadcrumbs__link" href="/">Level three page</a></li>
    <li class="govuk-breadcrumbs__list-item"><a class="govuk-breadcrumbs__link" href="/">Level four page</a></li>
  </ol>
</div>
<p class="govuk-inset-text">If you make this page narrower the inner breadcrumbs will be hiddden.</p>

Breadcrumbs from an array of links

If you need more control over the breadcrumbs you can pass in any array of links.

The govuk_breadcrumb_link_to helper generates links with the govuk-breadcrumbs__link class.

Input

= govuk_breadcrumbs(breadcrumbs: breadcrumbs)

<%= govuk_breadcrumbs(breadcrumbs: breadcrumbs) %>

{
  breadcrumbs: [
    govuk_breadcrumb_link_to("Home", "/"),
    govuk_breadcrumb_link_to("Level one page", "/"),
    govuk_breadcrumb_link_to("Level two page", "/")
  ]
}

Output

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item" aria-current="page"><a class="govuk-breadcrumbs__link" href="/">Home</a></li>
    <li class="govuk-breadcrumbs__list-item" aria-current="page"><a class="govuk-breadcrumbs__link" href="/">Level one page</a></li>
    <li class="govuk-breadcrumbs__list-item" aria-current="page"><a class="govuk-breadcrumbs__link" href="/">Level two page</a></li>
  </ol>
</div>

Breadcrumbs with inverted colours

When breadcrumbs are displayed on darker backgrounds the inverse keyword argument can be used to make them readable.

Input

= govuk_breadcrumbs(breadcrumbs: breadcrumbs, inverse: true)

<%= govuk_breadcrumbs(breadcrumbs: breadcrumbs, inverse: true) %>

{
  breadcrumbs: [
    govuk_breadcrumb_link_to("Home", "/"),
    govuk_breadcrumb_link_to("Education and learning", "/"),
    govuk_breadcrumb_link_to("Schools and curriculum", "/"),
    govuk_breadcrumb_link_to("Early years foundation stage", "/")
  ]
}

Output

<div class="govuk-breadcrumbs govuk-breadcrumbs--inverse">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item" aria-current="page"><a class="govuk-breadcrumbs__link" href="/">Home</a></li>
    <li class="govuk-breadcrumbs__list-item" aria-current="page"><a class="govuk-breadcrumbs__link" href="/">Education and learning</a></li>
    <li class="govuk-breadcrumbs__list-item" aria-current="page"><a class="govuk-breadcrumbs__link" href="/">Schools and curriculum</a></li>
    <li class="govuk-breadcrumbs__list-item" aria-current="page"><a class="govuk-breadcrumbs__link" href="/">Early years foundation stage</a></li>
  </ol>
</div>