1. Component Guide
  2. Breadcrumbs
  3. Stop collapsing on mobile
Breadcrumbs example

Stop collapsing on mobile

We recommend that if using the breadcrumbs for navigation purposes, you set collapse_on_mobile to true to make things more readable for mobile users. However, you can specify collapse_on_mobile:false or remove the flag completely to stop this behaviour.

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": "Passports, travel and living abroad",
        "@id": "https://www.gov.uk/browse/abroad"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item": {
        "name": "Travel abroad",
        "@id": "https://www.gov.uk/browse/abroad/travel-abroad"
      }
    }
  ]
}
</script>

<div class="gem-c-breadcrumbs govuk-breadcrumbs" data-module="gem-track-click">
  <ol class="govuk-breadcrumbs__list">
        <li class="govuk-breadcrumbs__list-item">
          <a data-track-category="homeLinkClicked" data-track-action="homeBreadcrumb" data-track-label="" data-track-options="{}" class="govuk-breadcrumbs__link" href="/">Home</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="/browse/abroad" data-track-options="{&quot;dimension28&quot;:&quot;3&quot;,&quot;dimension29&quot;:&quot;Passports, travel and living abroad&quot;}" class="govuk-breadcrumbs__link" href="/browse/abroad">Passports, travel and living abroad</a>
        </li>
        <li class="govuk-breadcrumbs__list-item">
          <a data-track-category="breadcrumbClicked" data-track-action="3" data-track-label="/browse/abroad/travel-abroad" data-track-options="{&quot;dimension28&quot;:&quot;3&quot;,&quot;dimension29&quot;:&quot;Travel abroad&quot;}" class="govuk-breadcrumbs__link" href="/browse/abroad/travel-abroad">Travel abroad</a>
        </li>
  </ol>
</div>

How to call this example

<%= render "govuk_publishing_components/components/breadcrumbs", {
  collapse_on_mobile: false,
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Passports, travel and living abroad",
      url: "/browse/abroad"
    },
    {
      title: "Travel abroad",
      url: "/browse/abroad/travel-abroad"
    }
  ]
} %>