1. Government Frontend Component Guide
  2. Breadcrumbs
  3. Many breadcrumbs

Breadcrumbs example

Many breadcrumbs

How it looks

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

How to call this example

<%= 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"
    }
  ]
} %>