Breadcrumbs example

Long taxon

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

How it looks (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": "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>

<nav data-module="ga4-link-tracker" aria-label="Breadcrumb" class="gem-c-breadcrumbs govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile">
  <ol class="govuk-breadcrumbs__list">
        <li class="govuk-breadcrumbs__list-item">
          <a data-ga4-link="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;breadcrumb&quot;,&quot;index_link&quot;:&quot;1&quot;,&quot;index_total&quot;:&quot;3&quot;}" class="govuk-breadcrumbs__link" href="/">Home</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <a data-ga4-link="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;breadcrumb&quot;,&quot;index_link&quot;:&quot;2&quot;,&quot;index_total&quot;:&quot;3&quot;}" class="govuk-breadcrumbs__link" href="/education">Education, training and skills</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <a data-ga4-link="{&quot;event_name&quot;:&quot;navigation&quot;,&quot;type&quot;:&quot;breadcrumb&quot;,&quot;index_link&quot;:&quot;3&quot;,&quot;index_total&quot;:&quot;3&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>
</nav>

How to call this example

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