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.
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="gem-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="{"dimension28":"2","dimension29":"Section"}" 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="{"dimension28":"2","dimension29":"Sub-section"}" 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="gem-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="{"dimension28":"2","dimension29":"Section"}" 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="{"dimension28":"2","dimension29":"Education of disadvantaged children"}" 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="gem-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="gem-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="{"dimension28":"1","dimension29":"Section"}" 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="gem-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="{"dimension28":"4","dimension29":"Section"}" 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="{"dimension28":"4","dimension29":"Sub-section"}" 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="{"dimension28":"4","dimension29":"Sub Sub-section"}" 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="gem-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="{"dimension28":"2","dimension29":"Service Manual"}" 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="{"dimension28":"2","dimension29":"Agile Delivery"}" 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="gem-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="{"dimension28":"3","dimension29":"Passports, travel and living abroad"}" 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="{"dimension28":"3","dimension29":"Travel abroad"}" 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="gem-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="{"dimension28":"3","dimension29":"Education, training and skills"}" 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="{"dimension28":"3","dimension29":"Education of disadvantaged children appended with some extra long content to make this a very very very very long taxon"}" 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="gem-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="{"dimension28":"3","dimension29":"Passports, travel and living abroad"}" 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="{"dimension28":"3","dimension29":"Travel abroad"}" 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"
}
]
} %>With border (preview)
Set a border below the breadcrumb. Off by default.
<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"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"name": "Sub-sub-section",
"@id": "https://www.gov.uk/section/sub-section/sub-section"
}
}
]
}
</script>
<div class="gem-c-breadcrumbs govuk-breadcrumbs gem-c-breadcrumbs--border-bottom" data-module="gem-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="{"dimension28":"3","dimension29":"Section"}" 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="{"dimension28":"3","dimension29":"Sub-section"}" 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="3" data-track-label="/section/sub-section/sub-section" data-track-options="{"dimension28":"3","dimension29":"Sub-sub-section"}" class="govuk-breadcrumbs__link" href="/section/sub-section/sub-section">Sub-sub-section</a>
</li>
</ol>
</div><%= render "govuk_publishing_components/components/breadcrumbs", {
border: "bottom",
breadcrumbs: [
{
title: "Section",
url: "/section"
},
{
title: "Sub-section",
url: "/section/sub-section"
},
{
title: "Sub-sub-section",
url: "/section/sub-section/sub-section"
}
]
} %>With border and collapse on mobile (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"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"name": "Sub-section",
"@id": "https://www.gov.uk/section/sub-section"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"name": "Sub-sub-section",
"@id": "https://www.gov.uk/section/sub-section/sub-section"
}
}
]
}
</script>
<div class="gem-c-breadcrumbs govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile gem-c-breadcrumbs--border-bottom" data-module="gem-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="{"dimension28":"3","dimension29":"Section"}" 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="{"dimension28":"3","dimension29":"Sub-section"}" 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="3" data-track-label="/section/sub-section/sub-section" data-track-options="{"dimension28":"3","dimension29":"Sub-sub-section"}" class="govuk-breadcrumbs__link" href="/section/sub-section/sub-section">Sub-sub-section</a>
</li>
</ol>
</div><%= render "govuk_publishing_components/components/breadcrumbs", {
border: "bottom",
collapse_on_mobile: true,
breadcrumbs: [
{
title: "Section",
url: "/section"
},
{
title: "Sub-section",
url: "/section/sub-section"
},
{
title: "Sub-sub-section",
url: "/section/sub-section/sub-section"
}
]
} %>