Breadcrumb
Shows where the current page sits in the site hierarchy. The separator is drawn with CSS so screen readers only read the links.
<section id="top" class="iv-stack iv-u-gap-4">
<nav class="iv-breadcrumb" aria-label="Breadcrumb">
<ol class="iv-breadcrumb__list">
<li class="iv-breadcrumb__item"><a href="#top">Documentation</a></li>
<li class="iv-breadcrumb__item"><a href="#top">Components</a></li>
<li class="iv-breadcrumb__item"><a href="#top">Navigation</a></li>
<li class="iv-breadcrumb__item" aria-current="page">Breadcrumb</li>
</ol>
</nav>
<h2 class="iv-u-m-0">Breadcrumb</h2>
<p class="iv-u-m-0">
The links in this demo point back to this section, so nothing leads to an
invented page. The separator is a masked SVG on <code>::before</code>: it is
never announced and it follows the text colour in both themes. The last item
is plain text marked with <code>aria-current="page"</code>.
</p>
<nav class="iv-breadcrumb" aria-label="Breadcrumb, single level">
<ol class="iv-breadcrumb__list">
<li class="iv-breadcrumb__item" aria-current="page">Documentation</li>
</ol>
</nav>
</section>Markup
nav.iv-breadcrumb[aria-label="Breadcrumb"] → ol.iv-breadcrumb__list → li.iv-breadcrumb__item. The last item carries aria-current="page" and is not a link.
Common mistakes
- Separator characters typed into the HTML (they get read aloud).
- Linking the current page to itself.