Breadcrumbs
Sample HTML
<nav aria-label="Breadcrumb">
<ol class="ds_breadcrumbs">
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">
Home
</a>
</li>
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">
Justice and the law
</a>
</li>
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">
Your rights and the law
</a>
</li>
<li class="ds_breadcrumbs__item" aria-current="page">
Data sharing of personal information
</li>
</ol>
</nav>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 different style from the other items in the breadcrumbs
You might not need to use breadcrumbs if you use a top level navigation, such as a site navigation component.
You should not use breadcrumbs on 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.
Evidence
Evidence from mygov.scot shows that people use breadcrumbs more than other forms of navigation. For example, using breadcrumbs more than in-page panel links or the back button.
Variants
You can leave the current page out if there are issues with repetition or long page titles. Keep the current page available to screen readers by using the visually-hidden CSS class.
Sample HTML
<nav aria-label="Breadcrumb">
<ol class="ds_breadcrumbs">
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">
Home
</a>
</li>
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">
Justice and the law
</a>
</li>
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">
Your rights and the law
</a>
</li>
<li class="ds_breadcrumbs__item visually-hidden" aria-current="page">
An incredibly long nonsense title, as an example of a problematically long title, for demonstration purposes only
</li>
</ol>
</nav>Website analytics
You can track breadcrumb link clicks through the original page path, the click URL, the click text and a data attribute showing the item number.
The Design System’s ‘tracking’ script adds the data attribute.
You should include a Schema representation of the breadcrumbs. This helps search engines to display a breadcrumb trail for your site. It also helps users navigate the structure of your site.
Sample JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://www.mygov.scot/",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://www.mygov.scot/environment-farm-marine/",
"name": "Environment, farming and marine"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://www.mygov.scot/environment-farm-marine/countryside/",
"name": "Environment and countryside"
}
}
]
}
</script>This Google structured data guidance for breadcrumbs is a helpful reference.
Accessibility
- We recommend a
navelement witharia-label="breadcrumb". You can find out more about this on GitHub. - The breadcrumb component contains all the accessibility features for breadcrumbs described in WAI-ARIA’s authoring practices for breadcrumbs.
- Make sure that separators between breadcrumb items are not read by screen readers. Do not use font glyphs for them – these can cause accessibility problems.
Live example
Marriage in Scotland (mygov.scot)
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback