Skip to main content

Breadcrumbs examples

  • # default

    Open this example in a new tab: button 
    {
  "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"
    }
  ]
}
    
{% from "govuk/components/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"
    }
  ]
}) }}

  • # with one level

    Open this example in a new tab: button 
    {
  "items": [
    {
      "text": "Section",
      "href": "/section"
    }
  ]
}
    
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

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

  • # without the home section

    Open this example in a new tab: button 
    {
  "items": [
    {
      "text": "Service Manual",
      "href": "/service-manual"
    },
    {
      "text": "Agile Delivery",
      "href": "/service-manual/agile-delivery"
    }
  ]
}
    
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

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

  • # with last breadcrumb as current page

    Open this example in a new tab: button 
    {
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Passports, travel and living abroad",
      "href": "/browse/abroad"
    },
    {
      "text": "Travel abroad"
    }
  ]
}
    
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

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

  • # with collapse on mobile

    Open this example in a new tab: button 
    {
  "collapseOnMobile": true,
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Education, training and skills",
      "href": "/education"
    },
    {
      "text": "Special educational needs and disability (SEND) and high needs",
      "href": "/education/special-educational-needs-and-disability-send-and-high-needs"
    }
  ]
}
    
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "collapseOnMobile": true,
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Education, training and skills",
      "href": "/education"
    },
    {
      "text": "Special educational needs and disability (SEND) and high needs",
      "href": "/education/special-educational-needs-and-disability-send-and-high-needs"
    }
  ]
}) }}

  • # inverse

    Open this example in a new tab: button 
    {
  "classes": "govuk-breadcrumbs--inverse",
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Passports, travel and living abroad",
      "href": "/browse/abroad"
    },
    {
      "text": "Travel abroad"
    }
  ]
}
    
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

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

  • # classes

    Open this example in a new tab: button 
    {
  "classes": "app-breadcrumbs--custom-modifier",
  "items": [
    {
      "text": "Home"
    }
  ]
}
    
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "classes": "app-breadcrumbs--custom-modifier",
  "items": [
    {
      "text": "Home"
    }
  ]
}) }}

  • # attributes

    Open this example in a new tab: button 
    {
  "attributes": {
    "id": "my-navigation",
    "data-foo": "bar"
  },
  "items": [
    {
      "text": "Home"
    }
  ]
}
    
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "attributes": {
    "id": "my-navigation",
    "data-foo": "bar"
  },
  "items": [
    {
      "text": "Home"
    }
  ]
}) }}

  • # item attributes

    Open this example in a new tab: button 
    {
  "items": [
    {
      "text": "Section 1",
      "href": "/section",
      "attributes": {
        "data-attribute": "my-attribute",
        "data-attribute-2": "my-attribute-2"
      }
    }
  ]
}
    
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "items": [
    {
      "text": "Section 1",
      "href": "/section",
      "attributes": {
        "data-attribute": "my-attribute",
        "data-attribute-2": "my-attribute-2"
      }
    }
  ]
}) }}

  • # html as text

    Open this example in a new tab: button 
    {
  "items": [
    {
      "text": "<span>Section 1</span>",
      "href": "/section-1"
    },
    {
      "text": "<span>Section 2</span>"
    }
  ]
}
    
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "items": [
    {
      "text": "<span>Section 1</span>",
      "href": "/section-1"
    },
    {
      "text": "<span>Section 2</span>"
    }
  ]
}) }}

  • # html

    Open this example in a new tab: button 
    {
  "items": [
    {
      "html": "<em>Section 1</em>",
      "href": "/section-1"
    },
    {
      "html": "<em>Section 2</em>",
      "href": "/section-2"
    }
  ]
}
    
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "items": [
    {
      "html": "<em>Section 1</em>",
      "href": "/section-1"
    },
    {
      "html": "<em>Section 2</em>",
      "href": "/section-2"
    }
  ]
}) }}

  • # custom label

    Open this example in a new tab: button 
    {
  "labelText": "Briwsion bara",
  "items": [
    {
      "text": "Hafan",
      "href": "/"
    },
    {
      "text": "Sefydliadau",
      "href": "/organisations"
    }
  ]
}
    
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  "labelText": "Briwsion bara",
  "items": [
    {
      "text": "Hafan",
      "href": "/"
    },
    {
      "text": "Sefydliadau",
      "href": "/organisations"
    }
  ]
}) }}