Breadcrumbs

Breadcrumbs

(open in a new window)

Code

Markup

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section">Section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section/sub-section">Sub-section</a>
    </li>
  </ol>
</div>

Macro

{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "items": [
    {
      "text": "Section",
      "href": "/section"
    },
    {
      "text": "Sub-section",
      "href": "/section/sub-section"
    }
  ]
}) }}

Breadcrumbs with one level

(open in a new window)

Code

Markup

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section">Section</a>
    </li>
  </ol>
</div>

Macro

{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "items": [
    {
      "text": "Section",
      "href": "/section"
    }
  ]
}) }}

Breadcrumbs with multiple levels

(open in a new window)

Code

Markup

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/">Home</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section">Section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section/sub-section">Sub-section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section/sub-section/sub-sub-section">Sub Sub-section</a>
    </li>
  </ol>
</div>

Macro

{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Section",
      "href": "/section"
    },
    {
      "text": "Sub-section",
      "href": "/section/sub-section"
    },
    {
      "text": "Sub Sub-section",
      "href": "/section/sub-section/sub-sub-section"
    }
  ]
}) }}

Breadcrumbs without the home section

(open in a new window)

Code

Markup

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/service-manual">Service Manual</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/service-manual/agile-delivery">Agile Delivery</a>
    </li>
  </ol>
</div>

Macro

{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "items": [
    {
      "text": "Service Manual",
      "href": "/service-manual"
    },
    {
      "text": "Agile Delivery",
      "href": "/service-manual/agile-delivery"
    }
  ]
}) }}

Breadcrumbs with last breadcrumb as current page

(open in a new window)

Code

Markup

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/">Home</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/browse/abroad">Passports, travel and living abroad</a>
    </li>
    <li class="govuk-breadcrumbs__list-item" aria-current="page">Travel abroad</li>
  </ol>
</div>

Macro

{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Passports, travel and living abroad",
      "href": "/browse/abroad"
    },
    {
      "text": "Travel abroad"
    }
  ]
}) }}