1. Government Frontend Component Guide
  2. Breadcrumbs
  3. Collapse on mobile

Breadcrumbs example

Collapse on mobile

This is currently used within on pages tagged to the taxonomy, such as on this page.

How it looks

  1. Home
  2. Education, training and skills
  3. Education of disadvantaged children
<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"}}]}
</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="/education" data-track-options="{&quot;dimension28&quot;:&quot;3&quot;,&quot;dimension29&quot;:&quot;Education, training and skills&quot;}" class="govuk-breadcrumbs__link" aria-current="false" href="/education">Education, training and skills</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="false">
          Education of disadvantaged children
      </li>
  </ol>
</div>

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",
      is_page_parent: true
    },
    {
      title: "Education of disadvantaged children"
    }
  ]
} %>