4.2.1 molecules.navigation.breadcrumb Breadcrumbs
Toggle example guides Toggle HTML markup
Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content. They are hidden on mobile screens.
Markup: 03-molecules/navigation/breadcrumb/breadcrumb.twig
<nav role="navigation" class="breadcrumbs">
<h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
<ol class="breadcrumb container">
<li>
<a href="#">Home</a>
<svg class="icon-gray icon-small">
<use xlink:href="#icon-navigate_next"></use>
</svg>
</li>
<li>
<a href="#">Overview</a>
<svg class="icon-gray icon-small">
<use xlink:href="#icon-navigate_next"></use>
</svg>
</li>
<li class="active"> Detail page</li>
</ol>
</nav>
Source:
03-molecules/navigation/breadcrumb/breadcrumb.scss
, line 3