GOVUK Breadcrumbs

An example of the govuk breadcrumb component.

Open example in new window

HTML

  <div class="govuk-breadcrumbs ">
  <ol class="govuk-breadcrumbs__list">


    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="#" test="value">Home</a>
    </li>



    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="#">Passports, travel and living abroad</a>
    </li>



    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="#">Travel abroad</a>
    </li>


  </ol>
</div>

Jinja

{% from "govuk_frontend_jinja/components/breadcrumbs/macro.html" import govukBreadcrumbs -%}
{{ govukBreadcrumbs({
    "items": [
      {
        "text": "Home",
        "href": "#",
        "attributes": {
          "test": "value"
        }
      },
      {
        "text": "Passports, travel and living abroad",
        "href": "#"
      },
      {
        "text": "Travel abroad",
        "href": "#"
      }
    ]
}) }}

---

Help improve this page

If you’ve got a question, idea or suggestion share it with the digital land team on github or email us on digitalland@communities.gov.uk