Components menu
Breadcrumb
A breadcrumb shows a user where they are in a website’s structure. It also presents links to pages higher in the site’s structure, such as a home page.
About this component
The breadcrumbs component should:
- be used if a website has 2 or more levels in its structure
- include the user’s current page
- display the current page item in a clearly different style from the other items in the breadcrumbs
You might not need a breadcrumbs component if the website has a top level navigation, such as a meganav or global navigation.
You should omit the breadcrumbs component from parts of a website where a user needs to go through pages in a certain order. This includes things like online forms and multi-page calculators.
Why we use this component
Breadcrumbs are online best practice for supporting user navigation.
There is evidence from mygov.scot that users interact with the breadcrumbs more than other forms of navigation, for example in-page panel links or the back swipe button.
Where there may be issues with repetition or page titles are too long, a version of breadcrumbs which do not include the current page can be used. In these cases keep the current page available to screen readers through the use of the visually-hidden CSS class.
HTML
<section class="container-fluid" aria-label="breadcrumb">
<div class="breadcrumb--container container">
<ol class="breadcrumb">
<li class="breadcrumb-item"> <a href="#" aria-label="Return to home"> Home </a> </li>
<li class="breadcrumb-item"> <a href="#" aria-label="Return to PAGE NAME"> Level one </a> </li>
<li class="breadcrumb-item active" aria-current="page"> <span class="activePage"> ACTIVE PAGE NAME </span> </li>
</ol>
</div>
</section>
CSS
.breadcrumb--container{
margin-top: 0px;
border-bottom: 1px solid var(--grey-three);
}
.breadcrumb {
--bs-breadcrumb-padding-x: 0;
--bs-breadcrumb-padding-y: 0;
--bs-breadcrumb-margin-bottom: 0;
--bs-breadcrumb-divider-color: var(--verdant-green);
--bs-breadcrumb-item-padding-x: 0.5rem;
--bs-breadcrumb-item-active-color: var(--scottish-dark-teal);
display: flex;
flex-wrap: wrap;
padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
margin-bottom: var(--bs-breadcrumb-margin-bottom);
font-size: var(--bs-breadcrumb-font-size);
list-style: none;
background-color: var(--bs-breadcrumb-bg);
border-radius: var(--bs-breadcrumb-border-radius);
}
.breadcrumb-item + .breadcrumb-item::before {
float: left;
padding-right: var(--bs-breadcrumb-item-padding-x);
color: var(--bs-breadcrumb-divider-color);
content: var(--bs-breadcrumb-divider, ">");
line-height: 44px;
}
.breadcrumb-item {
padding: 10px 0;
display: flex;
flex-wrap: wrap;
}
.breadcrumb-item a {
color: var(--grey-one);
border-bottom: 0px solid var(--grey-one);
text-decoration: none;
font-weight: 500;
padding: 0px 10px;
min-height: 44px;
min-width: 44px;
line-height: 44px;
display: block;
}
.breadcrumb-item a:hover {
color: #000000;
text-decoration: none;
line-height: 44px;
}
.breadcrumb-item a:focus {
background-color: var(--verdant-green);
color: #000000;
border-bottom: 2px solid var(--grey-one);
text-decoration: none;
}
.breadcrumb-item.active {
color: var(--bs-breadcrumb-item-active-color);
font-weight: 600;
}
.breadcrumb-item span.activePage {
padding: 0px 10px;
min-height: 44px;
min-width: 44px;
line-height: 44px;
}
@media (max-width: 320px) {
.breadcrumb-item {
flex-wrap: nowrap;
}
}
@media (max-width: 992px) {
.bc-visually-hidden-focusable:not(:focus):not(:focus-within) {
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.bc-visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
position: absolute !important;
}
}
.interactive-component-spacer {
height: 12px;
}