<nav class="c-nav c-nav--breadcrumb" aria-label="Breadcrumb">
<ul class="c-nav__list" role="menubar">
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Home">Home</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Child page">Child page</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Grandchild page">Grandchild page</a>
</li>
<li class="c-nav__list-element" role="none">
<span class="c-nav__link c-nav__link--current" role="menuitem" aria-current="page" title="Current page">Current page</span>
</li>
</ul>
</nav>
<nav class="c-nav c-nav--breadcrumb" aria-label="Breadcrumb">
<ul class="c-nav__list" role="menubar">
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Home">Home</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Child page">Child page</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Grandchild page">Grandchild page</a>
</li>
<li class="c-nav__list-element" role="none">
<span class="c-nav__link c-nav__link--current" role="menuitem" aria-current="page" title="Current page">Current page</span>
</li>
</ul>
</nav>
/* No context defined for this component. */
The breadcrumb menu is a modified variant of the nav menu, to get this to work simply add the .c-nav–breadcrumb class to the main .c-nav container.