Breadcrumbs examples

Show params

Params

params:
- name: items
  type: array
  required: true
  description: Array of breadcrumbs item objects.
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored.
  - name: href
    type: string
    required: false
    description: Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
  - name: attributes
    type: object
    description: HTML attributes (for example data attributes) to add to the individual crumb.
- name: classes
  type: string
  required: false
  description: Classes to add to the breadcrumbs container.
- name: collapseOnMobile
  type: boolean
  required: false
  description: When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
- name: hasBackButton
  type: boolean
  required: false
  description: When true, the breadcrumbs will start with a back button link.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the breadcrumbs container.

default

Show code

Macro

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "items": [
    {
      "text": "Section",
      "href": "/section"
    },
    {
      "text": "Sub-section",
      "href": "/section/sub-section"
    }
  ]
})  }}

Markup




<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
  <ol class="lg:grid       lg:grid-cols-max-content-2
 w-full items-baseline text-sm">
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/section" >
        Section
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black  flex-1 font-semibold">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/section/sub-section"  aria-current="page">
        <strong>Sub-section</strong>
      </a>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

with one level

Show code

Macro

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "items": [
    {
      "text": "Section",
      "href": "/section"
    }
  ]
})  }}

Markup




<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
  <ol class="lg:grid       lg:grid-cols-max-content-1
 w-full items-baseline text-sm">
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black  flex-1 font-semibold">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/section"  aria-current="page">
        <strong>Section</strong>
      </a>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

with multiple levels

Show code

Macro

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "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"
    }
  ]
})  }}

Markup




<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
  <ol class="lg:grid       lg:grid-cols-max-content-4
 w-full items-baseline text-sm">
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Home
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/section" >
        Section
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/section/sub-section" >
        Sub-section
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black  flex-1 font-semibold">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/section/sub-section/sub-sub-section"  aria-current="page">
        <strong>Sub Sub-section</strong>
      </a>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

with very large strings

Show code

Macro

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "items": [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    }
  ]
})  }}

Markup




<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
  <ol class="lg:grid       lg:grid-cols-max-content-4
 w-full items-baseline text-sm">
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black  flex-1 font-semibold">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/"  aria-current="page">
        <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor</strong>
      </a>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

middle item without href

Show code

Macro

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Section"
    },
    {
      "text": "Sub-section",
      "href": "/section/sub-section"
    },
    {
      "text": "Sub Sub-section",
      "href": "/section/sub-section/sub-sub-section"
    }
  ]
})  }}

Markup




<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
  <ol class="lg:grid       lg:grid-cols-max-content-4
 w-full items-baseline text-sm">
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Home
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark ">
      <span class="no-underline truncate">
        Section
      </span>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/section/sub-section" >
        Sub-section
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black  flex-1 font-semibold">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/section/sub-section/sub-sub-section"  aria-current="page">
        <strong>Sub Sub-section</strong>
      </a>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

with last breadcrumb as current page with href

Show code

Macro

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Passports, travel and living abroad",
      "href": "/browse/abroad"
    },
    {
      "text": "Travel abroad",
      "href": "/browse/travel/abroad"
    }
  ]
})  }}

Markup




<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
  <ol class="lg:grid       lg:grid-cols-max-content-3
 w-full items-baseline text-sm">
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Home
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/browse/abroad" >
        Passports, travel and living abroad
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black  flex-1 font-semibold">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/browse/travel/abroad"  aria-current="page">
        <strong>Travel abroad</strong>
      </a>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

with last breadcrumb as current page without href

Show code

Macro

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Passports, travel and living abroad",
      "href": "/browse/abroad"
    },
    {
      "text": "Travel abroad"
    }
  ]
})  }}

Markup




<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
  <ol class="lg:grid       lg:grid-cols-max-content-3
 w-full items-baseline text-sm">
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Home
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/browse/abroad" >
        Passports, travel and living abroad
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark  flex-1 font-semibold">
      <span class="no-underline text-black truncate" aria-current="page">
        <strong>Travel abroad</strong>
      </span>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

with collapse on mobile

See in small widths to collapse middle items.

Show code

Macro

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "collapseOnMobile": true,
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Education, training and skills",
      "href": "/education"
    },
    {
      "text": "Special educational needs and disability",
      "href": "/education/special-educational-needs-and-disability"
    }
  ]
})  }}

Markup




<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--collapse-on-mobile" aria-label="Estás en: ">
  <ol class="lg:grid       lg:grid-cols-max-content-3
 w-full items-baseline text-sm">
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Home
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/education" >
        Education, training and skills
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black  flex-1 font-semibold">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/education/special-educational-needs-and-disability"  aria-current="page">
        <strong>Special educational needs and disability</strong>
      </a>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

with backbutton

Show code

Macro

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "hasBackButton": true,
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Passports, travel and living abroad",
      "href": "/browse/abroad"
    },
    {
      "text": "Travel abroad"
    }
  ]
})  }}

Markup




<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
  <ol class="lg:grid       lg:grid-cols-max-content-4
 w-full items-baseline text-sm">
    <li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
      <a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">&larr;</span></a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Home
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/browse/abroad" >
        Passports, travel and living abroad
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark  flex-1 font-semibold">
      <span class="no-underline text-black truncate" aria-current="page">
        <strong>Travel abroad</strong>
      </span>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

with backbutton and collapse on mobile

See in small widths to collapse middle items.

Show code

Macro

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "collapseOnMobile": true,
  "hasBackButton": true,
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Education, training and skills",
      "href": "/education"
    },
    {
      "text": "Special educational needs and disability",
      "href": "/education/special-educational-needs-and-disability"
    },
    {
      "text": "Travel abroad",
      "href": "/browse/abroad"
    }
  ]
})  }}

Markup




<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--collapse-on-mobile" aria-label="Estás en: ">
  <ol class="lg:grid       lg:grid-cols-max-content-5
 w-full items-baseline text-sm">
    <li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
      <a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">&larr;</span></a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Home
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/education" >
        Education, training and skills
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/education/special-educational-needs-and-disability" >
        Special educational needs and disability
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black  flex-1 font-semibold">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/browse/abroad"  aria-current="page">
        <strong>Travel abroad</strong>
      </a>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

with backbutton and truncated modifier class

Show code

Macro

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "hasBackButton": true,
  "classes": "c-breadcrumbs--truncated",
  "items": [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    }
  ]
})  }}

Markup




<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--truncated" aria-label="Estás en: ">
  <ol class="lg:grid       lg:grid-cols-max-content-5
 w-full items-baseline text-sm">
    <li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
      <a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">&larr;</span></a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black ">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/" >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </a>
    </li>
    <li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black  flex-1 font-semibold">
      <a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/"  aria-current="page">
        <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor</strong>
      </a>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->