Breadcrumbs example
Default
How it looks (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"
}
}
]
}
</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 example
<%= render "govuk_publishing_components/components/breadcrumbs", {
collapse_on_mobile: true,
breadcrumbs: [
{
title: "Section",
url: "/section"
},
{
title: "Sub-section",
url: "/section/sub-section"
}
]
} %>