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

We recommend that if using the breadcrumbs for navigation purposes, you set collapse_on_mobile to true to make things more readable for mobile users. However, you can specify collapse_on_mobile:false or remove the flag completely to stop this behaviour.

Search for usage of this component on GitHub

How it looks (preview) (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 govuk-breadcrumbs--collapse-on-mobile" data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/section">Section</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/section/sub-section">Sub-section</a>
        </li>
  </ol>
</div>

How to call this component

<%= render "govuk_publishing_components/components/breadcrumbs", {
  collapse_on_mobile: true,
  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
  • have meaningful 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/section/sub-section"
      }
    }
  ]
}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile gem-c-breadcrumbs--inverse" data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/section">Section</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <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;Education of disadvantaged children&quot;}" class="govuk-breadcrumbs__link" href="/section/sub-section">Education of disadvantaged children</a>
        </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  collapse_on_mobile: true,
  breadcrumbs: [
    {
      title: "Section",
      url: "/section"
    },
    {
      title: "Education of disadvantaged children",
      url: "/section/sub-section"
    }
  ],
  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 govuk-breadcrumbs--collapse-on-mobile" data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  collapse_on_mobile: true,
  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 govuk-breadcrumbs--collapse-on-mobile" data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/section">Section</a>
        </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  collapse_on_mobile: true,
  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 govuk-breadcrumbs--collapse-on-mobile" data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
        <li class="govuk-breadcrumbs__list-item">
          <a data-track-category="homeLinkClicked" data-track-action="homeBreadcrumb" data-track-label="" data-track-options="{}" class="govuk-breadcrumbs__link" href="/">Home</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/section">Section</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/section/sub-section">Sub-section</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/section/sub-section/sub-sub-section">Sub Sub-section</a>
        </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  collapse_on_mobile: true,
  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 govuk-breadcrumbs--collapse-on-mobile" data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/service-manual">Service Manual</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/service-manual/agile-delivery">Agile Delivery</a>
        </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  collapse_on_mobile: true,
  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 govuk-breadcrumbs--collapse-on-mobile" data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
        <li class="govuk-breadcrumbs__list-item">
          <a data-track-category="homeLinkClicked" data-track-action="homeBreadcrumb" data-track-label="" data-track-options="{}" class="govuk-breadcrumbs__link" href="/">Home</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/browse/abroad">Passports, travel and living abroad</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/browse/abroad/travel-abroad">Travel abroad</a>
        </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  collapse_on_mobile: true,
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Passports, travel and living abroad",
      url: "/browse/abroad"
    },
    {
      title: "Travel abroad",
      url: "/browse/abroad/travel-abroad"
    }
  ]
} %>

Long taxon (preview)

This is an example of a breadcrumb with long taxons to demonstrate the wrapping behaviour and touch target area on mobile

<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 appended with some extra long content to make this a very very very very long taxon",
        "@id": "https://www.gov.uk/education"
      }
    }
  ]
}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile" data-module="track-click">
  <ol class="govuk-breadcrumbs__list">
        <li class="govuk-breadcrumbs__list-item">
          <a data-track-category="homeLinkClicked" data-track-action="homeBreadcrumb" data-track-label="" data-track-options="{}" class="govuk-breadcrumbs__link" href="/">Home</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/education">Education, training and skills</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <a data-track-category="breadcrumbClicked" data-track-action="3" data-track-label="/education" data-track-options="{&quot;dimension28&quot;:&quot;3&quot;,&quot;dimension29&quot;:&quot;Education of disadvantaged children appended with some extra long content to make this a very very very very long taxon&quot;}" class="govuk-breadcrumbs__link" href="/education">Education of disadvantaged children appended with some extra long content to make this a very very very very long taxon</a>
        </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  collapse_on_mobile: true,
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Education, training and skills",
      url: "/education"
    },
    {
      title: "Education of disadvantaged children appended with some extra long content to make this a very very very very long taxon",
      url: "/education"
    }
  ]
} %>

Stop collapsing on mobile (preview)

We recommend that if using the breadcrumbs for navigation purposes, you set collapse_on_mobile to true to make things more readable for mobile users. However, you can specify collapse_on_mobile:false or remove the flag completely to stop this behaviour.

<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">
          <a data-track-category="homeLinkClicked" data-track-action="homeBreadcrumb" data-track-label="" data-track-options="{}" class="govuk-breadcrumbs__link" href="/">Home</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/browse/abroad">Passports, travel and living abroad</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <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" href="/browse/abroad/travel-abroad">Travel abroad</a>
        </li>
  </ol>
</div>
<%= render "govuk_publishing_components/components/breadcrumbs", {
  collapse_on_mobile: false,
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Passports, travel and living abroad",
      url: "/browse/abroad"
    },
    {
      title: "Travel abroad",
      url: "/browse/abroad/travel-abroad"
    }
  ]
} %>