Breadcrumbs laat de stappen zien die de gebruiker heeft genomen om op de huidige pagina te komen. Elke stap is een klikbare paginatitel behalve de laatste. Samen vormen die stappen een visueel pad. Het laat gebruikers zien waar ze zich bevinden binnen de structuur van de website of applicatie. Ze kunnen breadcrumbs gebruiken om terug of omhoog te navigeren naar vorige niveaus of naar de homepage.
Gebruik breadcrumbs bij een geneste navigatie waarbij elk onderdeel een link is. Ze zijn effectief bij een systeem of product dat uit meer dan twee niveaus bestaat. Ze nemen weinig ruimte in, bieden overzicht en geven inzicht in waar de gebruiker zich bevindt.
Gebruik breadcrumbs nooit om een complete navigatie vervangen. Gebruik ze ook niet bij systemen of producten met één niveau, of bij websites met een lineaire structuur.
Breadcrumbs staan bovenaan de pagina, onder de header en navigatie, maar boven de paginatitel. Elke paginalink moet kort zijn en duidelijk de locatie laten zien waar het naartoe linkt.
De pagina waarop de gebruiker zich bevindt wordt wel getoond in het pad maar is niet klikbaar (uitgegrijsd). Begin met de pagina op het hoogste niveau en toon daarna steeds een dieper niveau tot de huidige pagina bereikt is.
Breadcrumbs tonen zo de daadwerkelijke stappen die de gebruiker heeft genomen om naar de huidige pagina te gaan, in plaats van de informatiearchitectuur van de site. Path gebaseerde breadcrumbs worden altijd dynamisch gegenereerd.
<nav aria-label="U bevindt zich hier:">
<ol class="breadcrumb" itemscope itemtype="//schema.org/BreadcrumbList">
<li itemscope="" itemprop="itemListElement" itemtype="//schema.org/ListItem">
<a itemprop="item" href="#">
<span itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemscope="" itemprop="itemListElement" itemtype="//schema.org/ListItem">
<a itemprop="item" href="#">
<span itemprop="name">Zelf aan de slag</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li class="active" aria-current="page" itemscope="" itemprop="itemListElement" itemtype="//schema.org/ListItem">
<span itemprop="name">Inhoud</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
<nav aria-label="U bevindt zich hier:">
<ol class="breadcrumb" itemscope itemtype="//schema.org/BreadcrumbList">
{%- for crumb in crumbs %}
{%- if loop.last -%}
<li
class="active"
aria-current="page"
itemscope=""
itemprop="itemListElement"
itemtype="//schema.org/ListItem">
<span itemprop="name">
{{- crumb.label -}}
</span>
<meta itemprop="position" content="{{loop.index}}" />
</li>
{%- else -%}
<li
itemscope=""
itemprop="itemListElement"
itemtype="//schema.org/ListItem">
<a
itemprop="item"
href="{{ crumb.url }}">
<span itemprop="name">
{{- crumb.label -}}
</span>
</a>
<meta itemprop="position" content="{{loop.index}}" />
</li>
{%- endif -%}
{% endfor %}
</ol>
</nav>
__title: breadcrumbs
crumbs:
- label: Home
url: '#'
- label: Zelf aan de slag
url: '#'
- label: Inhoud
url: '#'