1. Government Frontend Component Guide
  2. Breadcrumbs
  3. Highlight current page

Breadcrumbs example

Highlight current page

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

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":"Education, training and skills","@id":"https://www.gov.uk/education"}},{"@type":"ListItem","position":3,"item":{"name":"Education of disadvantaged children","@id":"https://www.gov.uk/component-guide/breadcrumbs/highlight_current_page"}}]}
</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="page">
          <a data-track-category="breadcrumbClicked" data-track-action="3" data-track-label="#content" data-track-options="{&quot;dimension28&quot;:&quot;3&quot;,&quot;dimension29&quot;:&quot;Education of disadvantaged children&quot;}" class="govuk-breadcrumbs__link" aria-current="page" href="#content">Education of disadvantaged children</a>
      </li>
  </ol>
</div>

How to call this example

<%= render "govuk_publishing_components/components/breadcrumbs", {
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Education, training and skills",
      url: "/education"
    },
    {
      title: "Education of disadvantaged children",
      is_current_page: true
    }
  ]
} %>