<nav class="breadcrumbs" aria-label="Breadcrumb">
<ol class="flat-list inline">
<li>
<a href="../preview/dashboard.html">Dashboard</a>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#breadcrumb" />
</svg>
</li>
<li>
<a href="../../#.html">Sub-page</a>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#breadcrumb" />
</svg>
</li>
<li>
<a href="../../#.html" aria-current="page">This page</a>
</li>
</ol>
</nav>
<nav class="breadcrumbs" aria-label="Breadcrumb">
<ol class="flat-list inline">
{{#each crumbs}}
<li>
<a href="{{#if url}}{{ path url }}{{else}}#{{/if}}">{{label}}</a>
{{> @svg icon="breadcrumb"}}
</li>
{{/each}}
<li>
<a href="{{#if current-url}}{{ path current-url }}{{else}}#{{/if}}" aria-current="page">{{current-label}}</a>
</li>
</ol>
</nav>
{
"current-label": "This page",
"current-url": "#",
"crumbs": [
{
"label": "Dashboard",
"url": "/components/preview/dashboard"
},
{
"label": "Sub-page",
"url": "#"
}
]
}
/**
* Breadcrumbs
*/
@media screen {
.breadcrumbs ol {
display: flex;
margin: 0;
}
.breadcrumbs li + li {
margin: 0;
}
.breadcrumbs .icon {
width: 1.2em;
margin-left: -0.1em;
}
.breadcrumbs a {
color: var(--primary);
font-weight: 600;
}
.breadcrumbs a[aria-current] {
color: var(--body-text);
font-weight: 400;
text-decoration: none;
}
}
Use for helping users be aware of current navigational context. See Breadcrumbs In Web Design: Examples And Best Practices – Smashing Magazine.