The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.
{{ aspExample({ code: "<nav class=\"breadcrumbs\" aria-label=\"breadcrumbs\">
<div class=\"container\">
<span class=\"breadcrumb__intro\">You are here: </span>
<ol class=\"breadcrumb__list\">
<li class=\"breadcrumb__item\">
<a class=\"breadcrumb__link\" href=\"#\">Home</a>
</li>
<li class=\"breadcrumb__item\">Item</li>
</ol>
</div>
</nav>", nunjucks: "{{ aspBreadcrumbs({
root: \"#\",
rows: [
{
text: \"Link 2\",
href: \"#\"
},
{
text: \"Current page (not linked)\",
href: \"#\"
}
]
}) }}", title: "", id: "65a92a959998f", url: "" }) }}
When to use this component
Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website.
we breadcrumbs are required, ensure that a location-based approach to breadcrumbs is adopted. (rather than attribute-based or path-based).
When not to use this component
Do not use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction (such as a form).
If you’re using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.
How it works
Always place breadcrumbs at the top of a page, within the <main> element. Placing them here means that the ‘Skip to main content’ link allows the user to skip all navigation links, including breadcrumbs.
The breadcrumb should start with your ‘home’ page and end with the parent section of the current page.
Status of development
The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.
{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}