Scaffolding
Breadcrumbs
Navigation trail displayed at the top of pages.
Example
Macro
{{
breadcrumb({
items: [
{
href: basePath + "/",
text: "Home"
},
{
href: basePath + "/blocks",
text: "Blocks"
},
{
href: basePath + "/blocks/scaffolding",
text: "Scaffolding"
}
],
href: "#",
text: "Breadcrumbs"
})
}}
HTML
<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
<div class="nhsuk-width-container">
<ol class="nhsuk-breadcrumb__list">
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/">Home</a></li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/blocks">Blocks</a></li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/blocks/scaffolding">Scaffolding</a></li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="#">Breadcrumbs</a></li>
</ol>
<p class="nhsuk-breadcrumb__back">
<a class="nhsuk-breadcrumb__backlink" href="#">
<span class="nhsuk-u-visually-hidden">Back to </span> Breadcrumbs </a>
</p>
</div>
</nav>