Skip to main content
  1. X-GOVUK projects
  2. GOV.UK Components
  3. Breadcrumbs

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 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>

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>

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

Output

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>