1. Government Frontend Component Guide
  2. Breadcrumbs

Component

Breadcrumbs

Navigational breadcrumbs, showing page hierarchy

Accepts an array of breadcrumb objects. Each crumb must have a title and a URL. Links have tracking data but links to the homepage (any link with a url of “/”) will be tracked separately as homeLinkClicked

Search for usage of this component on GitHub

How it looks (preview all)

<script type="application/ld+json">
  {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Section","@id":"https://www.gov.uk/section"}},{"@type":"ListItem","position":2,"item":{"name":"Sub-section","@id":"https://www.gov.uk/section/sub-section"}}]}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs " data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="1" data-track-label="/section" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Section&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/section">Section</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="/section/sub-section" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Sub-section&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/section/sub-section">Sub-section</a>
      </li>
  </ol>
</div>

How to call this component

<%= render "govuk_publishing_components/components/breadcrumbs", {
  breadcrumbs: [
    {
      title: "Section",
      url: "/section"
    },
    {
      title: "Sub-section",
      url: "/section/sub-section"
    }
  ]
} %>

Accessibility acceptance criteria

The breadcrumb links must have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA (this especially applies when using the inverse flag).

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text

Other examples

Inverse (preview)

On a dark background, such as the header of topic pages

<script type="application/ld+json">
  {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Section","@id":"https://www.gov.uk/section"}},{"@type":"ListItem","position":2,"item":{"name":"Education of disadvantaged children","@id":"https://www.gov.uk/component-guide/breadcrumbs"}}]}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs gem-c-breadcrumbs--inverse" data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="1" data-track-label="/section" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Section&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/section">Section</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="page">
          <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="#content" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Education of disadvantaged children&quot;}" class="govuk-breadcrumbs__link" aria-current="page" href="#content">Education of disadvantaged children</a>
      </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  breadcrumbs: [
    {
      title: "Section",
      url: "/section"
    },
    {
      title: "Education of disadvantaged children",
      url: "/section/sub-section",
      is_current_page: true
    }
  ],
  inverse: true
} %>

No breadcrumbs (preview)

<script type="application/ld+json">
  {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[]}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs " data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  breadcrumbs: [

  ]
} %>

Single section (preview)

<script type="application/ld+json">
  {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Section","@id":"https://www.gov.uk/section"}}]}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs " data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="1" data-track-label="/section" data-track-options="{&quot;dimension28&quot;:&quot;1&quot;,&quot;dimension29&quot;:&quot;Section&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/section">Section</a>
      </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  breadcrumbs: [
    {
      title: "Section",
      url: "/section"
    }
  ]
} %>

Many breadcrumbs (preview)

<script type="application/ld+json">
  {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https://www.gov.uk/"}},{"@type":"ListItem","position":2,"item":{"name":"Section","@id":"https://www.gov.uk/section"}},{"@type":"ListItem","position":3,"item":{"name":"Sub-section","@id":"https://www.gov.uk/section/sub-section"}},{"@type":"ListItem","position":4,"item":{"name":"Sub Sub-section","@id":"https://www.gov.uk/section/sub-section/sub-sub-section"}}]}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs " data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="homeLinkClicked" data-track-action="homeBreadcrumb" data-track-label="" data-track-options="{}" class="govuk-breadcrumbs__link" aria-current="false" href="/">Home</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="/section" data-track-options="{&quot;dimension28&quot;:&quot;4&quot;,&quot;dimension29&quot;:&quot;Section&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/section">Section</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="3" data-track-label="/section/sub-section" data-track-options="{&quot;dimension28&quot;:&quot;4&quot;,&quot;dimension29&quot;:&quot;Sub-section&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/section/sub-section">Sub-section</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="4" data-track-label="/section/sub-section/sub-sub-section" data-track-options="{&quot;dimension28&quot;:&quot;4&quot;,&quot;dimension29&quot;:&quot;Sub Sub-section&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/section/sub-section/sub-sub-section">Sub Sub-section</a>
      </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Section",
      url: "/section"
    },
    {
      title: "Sub-section",
      url: "/section/sub-section"
    },
    {
      title: "Sub Sub-section",
      url: "/section/sub-section/sub-sub-section"
    }
  ]
} %>

No home (preview)

<script type="application/ld+json">
  {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Service Manual","@id":"https://www.gov.uk/service-manual"}},{"@type":"ListItem","position":2,"item":{"name":"Agile Delivery","@id":"https://www.gov.uk/service-manual/agile-delivery"}}]}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs " data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="1" data-track-label="/service-manual" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Service Manual&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/service-manual">Service Manual</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="/service-manual/agile-delivery" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Agile Delivery&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/service-manual/agile-delivery">Agile Delivery</a>
      </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  breadcrumbs: [
    {
      title: "Service Manual",
      url: "/service-manual"
    },
    {
      title: "Agile Delivery",
      url: "/service-manual/agile-delivery"
    }
  ]
} %>

Real (preview)

<script type="application/ld+json">
  {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https://www.gov.uk/"}},{"@type":"ListItem","position":2,"item":{"name":"Passports, travel and living abroad","@id":"https://www.gov.uk/browse/abroad"}},{"@type":"ListItem","position":3,"item":{"name":"Travel abroad","@id":"https://www.gov.uk/browse/abroad/travel-abroad"}}]}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs " data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="homeLinkClicked" data-track-action="homeBreadcrumb" data-track-label="" data-track-options="{}" class="govuk-breadcrumbs__link" aria-current="false" href="/">Home</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="/browse/abroad" data-track-options="{&quot;dimension28&quot;:&quot;3&quot;,&quot;dimension29&quot;:&quot;Passports, travel and living abroad&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/browse/abroad">Passports, travel and living abroad</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="3" data-track-label="/browse/abroad/travel-abroad" data-track-options="{&quot;dimension28&quot;:&quot;3&quot;,&quot;dimension29&quot;:&quot;Travel abroad&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/browse/abroad/travel-abroad">Travel abroad</a>
      </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Passports, travel and living abroad",
      url: "/browse/abroad"
    },
    {
      title: "Travel abroad",
      url: "/browse/abroad/travel-abroad"
    }
  ]
} %>

Last breadcrumb is current page (preview)

<script type="application/ld+json">
  {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https://www.gov.uk/"}},{"@type":"ListItem","position":2,"item":{"name":"Passports, travel and living abroad","@id":"https://www.gov.uk/browse/abroad"}}]}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs " data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="homeLinkClicked" data-track-action="homeBreadcrumb" data-track-label="" data-track-options="{}" class="govuk-breadcrumbs__link" aria-current="false" href="/">Home</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="/browse/abroad" data-track-options="{&quot;dimension28&quot;:&quot;3&quot;,&quot;dimension29&quot;:&quot;Passports, travel and living abroad&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/browse/abroad">Passports, travel and living abroad</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          Travel abroad
      </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Passports, travel and living abroad",
      url: "/browse/abroad"
    },
    {
      title: "Travel abroad"
    }
  ]
} %>

Highlight current page (preview)

This is currently used on pages tagged to the taxonomy, such as on this page.

<script type="application/ld+json">
  {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https://www.gov.uk/"}},{"@type":"ListItem","position":2,"item":{"name":"Education, training and skills","@id":"https://www.gov.uk/education"}},{"@type":"ListItem","position":3,"item":{"name":"Education of disadvantaged children","@id":"https://www.gov.uk/component-guide/breadcrumbs"}}]}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs " data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="homeLinkClicked" data-track-action="homeBreadcrumb" data-track-label="" data-track-options="{}" class="govuk-breadcrumbs__link" aria-current="false" href="/">Home</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="/education" data-track-options="{&quot;dimension28&quot;:&quot;3&quot;,&quot;dimension29&quot;:&quot;Education, training and skills&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/education">Education, training and skills</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="page">
          <a data-track-category="breadcrumbClicked" data-track-action="3" data-track-label="#content" data-track-options="{&quot;dimension28&quot;:&quot;3&quot;,&quot;dimension29&quot;:&quot;Education of disadvantaged children&quot;}" class="govuk-breadcrumbs__link" aria-current="page" href="#content">Education of disadvantaged children</a>
      </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Education, training and skills",
      url: "/education"
    },
    {
      title: "Education of disadvantaged children",
      is_current_page: true
    }
  ]
} %>

Collapse on mobile (preview)

This is currently used within on pages tagged to the taxonomy, such as on this page.

  1. Home
  2. Education, training and skills
  3. Education of disadvantaged children
<script type="application/ld+json">
  {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https://www.gov.uk/"}},{"@type":"ListItem","position":2,"item":{"name":"Education, training and skills","@id":"https://www.gov.uk/education"}}]}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs " data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="homeLinkClicked" data-track-action="homeBreadcrumb" data-track-label="" data-track-options="{}" class="govuk-breadcrumbs__link" aria-current="false" href="/">Home</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="/education" data-track-options="{&quot;dimension28&quot;:&quot;3&quot;,&quot;dimension29&quot;:&quot;Education, training and skills&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/education">Education, training and skills</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          Education of disadvantaged children
      </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  collapse_on_mobile: true,
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Education, training and skills",
      url: "/education",
      is_page_parent: true
    },
    {
      title: "Education of disadvantaged children"
    }
  ]
} %>