Breadcrumb Navigation

Community

Toont de locatie van de pagina binnen de hiërarchie van een website en biedt de mogelijkheid om tussen niveaus te navigeren.

Definition of Done

Afgevinkt.

Naam
Naam bepaald op basis van NL Design System naamgeving.
Afgevinkt.

Beschrijving
Doel van component is in één zin beschreven.
Afgevinkt.

Afbeelding
Afbeelding gemaakt om de component visueel duidelijk te maken.
Afgevinkt.

Discussion URL
Afgevinkt.

Backlog
Staat in de publieke backlog van NL Design System.
Afgevinkt.

Bruikbaar
Bewijs verzameld dat de component algemeen bruikbaar is.
Afgevinkt.

Link
Link beschikbaar naar component in Figma of Storybook met alle belangrijke states en varianten.
Afgevinkt.

Varianten
Naam en doel van benodigde varianten beschreven.
Afgevinkt.

Onderzoek
Nut van component is onderbouwd door gebruikersonderzoek.
Afgevinkt.

Kernteam
Kernteam verwacht dat dit component tot Hall of Fame kan komen.
Afgevinkt.

nldesignsystem.nl
Vindbaar op de NL Design System website.

Help Wanted projectbord op GitHub

Niet afgevinkt.

🎉 Fast Track
Niet afgevinkt.

🎉 Huisstijl instelbaar
Niet afgevinkt.

🎉 Component gebruikt
Niet afgevinkt.

🎉 WCAG input
Niet afgevinkt.

📝 Issues bekend
Niet afgevinkt.

📝 Versimpeld of gesplitst
Niet afgevinkt.

📝 Anatomie
Niet afgevinkt.

📝 Acceptatiecriteria a11y
Niet afgevinkt.

📝 Semantiek
Niet afgevinkt.

📝 API
Niet afgevinkt.

📝 Testcases voor gebruik
Niet afgevinkt.

📝 Design tokens
Niet afgevinkt.

📝 Zoekwoorden
Niet afgevinkt.

📝 Stories en specs
Niet afgevinkt.

🛠️ React component
Niet afgevinkt.

🛠️ CSS component
Niet afgevinkt.

🛠️ Figma component
Niet afgevinkt.

🛠️ Voorbeeld thema
Niet afgevinkt.

🛠️ Documentatie
Niet afgevinkt.

🧪 Design Tokens getest
Niet afgevinkt.

🧪 A11y getest
Niet afgevinkt.

🧪 Testcases gebruik getest
Niet afgevinkt.

🧪 Thema's getest
Niet afgevinkt.

🧪 Internationalisatie getest
Niet afgevinkt.

🧪 Documentatie getest
Niet afgevinkt.

🚀 NPM - React
Niet afgevinkt.

🚀 NPM - CSS
Niet afgevinkt.

🚀 NPM - Docs
Niet afgevinkt.

🚀 NPM - Design Tokens
Niet afgevinkt.

🚀 Figma - Start Bibliotheek
Niet afgevinkt.

🚀 Figma - Voorbeeld Bibliotheek
Niet afgevinkt.

🚀 nldesignsystem.nl
Niet afgevinkt.

🚀 Themes repository

Candidate projectbord op GitHub

Community implementaties

Amsterdam

11 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Snel aan de slag

ams-breadcrumb in CSS

ams-breadcrumb in React

Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Snel aan de slag

utrecht-breadcrumb-nav in CSS

utrecht-breadcrumb-nav in Web Component

utrecht-breadcrumb-nav in React

utrecht-breadcrumb-nav in Vue

Rijkshuisstijl Community

10 van 11 stappen gedocumenteerd op het Community Rijkshuisstijl Community projectbord

Snel aan de slag

rhc-breadcrumb-nav in Figma

rhc-breadcrumb-nav in CSS

rhc-breadcrumb-nav in Web Component

rhc-breadcrumb-nav in React

RVO

8 van 11 stappen gedocumenteerd op het Community RVO projectbord

Snel aan de slag

rvo-breadcrumbs in CSS

rvo-breadcrumbs in React

Den Haag

6 van 11 stappen gedocumenteerd op het Community Den Haag projectbord

Snel aan de slag

breadcrumb in Figma

breadcrumb in CSS

Acceptatiecriteria

Gebruik jij één van de implementaties van deze component of heb je je eigen component gemaakt? In beide gevallen geldt: met onderstaande acceptatiecriteria kun je nagaan of jouw gebruik van deze component klopt met NL Design System.

Als je implementatie voldoet aan de acceptatiecriteria voor deze component, kun je er vanuit gaan dat je gebruik van deze component voldoet aan WCAG, niveau A en AA.

De linkteksten van de links in het broodkruimelpad zijn voor iedereen duidelijk

WCAG: 2.4.4 Linkdoel (in context)

De linktekst vertelt eenduidig aan de gebruiker waar de link naar toe gaat (het linkdoel).

Wat is een linktekst? Het is de tekst die zichtbaar is, maar ook de tekst die aan een gebruiker van hulpsoftware wordt voorgelezen.

Wat is het linkdoel? De locatie waar de link naartoe gaat. Bijvoorbeeld de contactpagina, een nieuwsbericht, een andere website of een download van een document.

Wat betekent In context? Het doel van de link kan ook door omringende content worden aangegeven. Dit moet dan wel ook voor gebruikers van hulpmiddelen duidelijk zijn, bijvoorbeeld door aanvullende tekst of een afbeelding naast de link. Dit laatste is onderwerp van veel discussie. Het beste is om altijd goed in de linktekst zelf te vertellen want het doel is.

De bezoeker kan het activeren van links in het broodkruimelpad annuleren

WCAG: 2.5.2 Aanwijzerannulering

Zorg ervoor dat als de gebruiker links in het broodkruimelpad aanraakt met een enkele aanwijzer, zoals een muis of vinger, er de mogelijkheid is om de actie te voorkomen of ongedaan te maken.

Dit voorkomt het per ongeluk aanraken en openen van content, wanneer het niet de bedoeling was.

Met een HTML link (a element met een href attribuut) gaat dit automatisch goed. Bij een div element met role="link" moet dit nog worden aangepast. Gebruik voor dit laatste bij voorkeur het click event, omdat dit apparaatonafhankelijk is.

De visuele naam van de links in het broodkruimelpad komen voor in de toegankelijke naam van de links in het broodkruimelpad

WCAG: 2.5.3 Label in naam

De zichtbare naam van een onderdeel moet terugkomen in de toegankelijke naam.

Het aanwijsgebied van de links in het broodkruimelpad is groot genoeg

WCAG: 2.5.8 Grootte van het aanwijsgebied (minimum)

Zorg ervoor dat de aanklikbare elementen op een pagina groot genoeg zijn om makkelijk aan te klikken met een muis of vinger.

Hierbij geldt dat het aan te klikken gebied ten minste 24 bij 24 pixels groot is, behalve als het aanklikbare element en de ruimte om het element samen tenminste 24 pixels groot zijn.

Hou als dat mogelijk is een groter aanwijsgebied van 44 bij 44 pixels aan, om ook te voldoen succescriterium 2.5.5 Grootte van het aanwijsgebied (uitgebreid)

NL Design System richtlijnen:

Als het broodkruimelpad tekst in een andere taal dan de hoofdtaal van de pagina bevat, wordt hier een taalwissel voor aangegeven

WCAG: 3.1.2 Taal van onderdelen

Geef wisseling van de taal aan waarin de tekst van elke passage of zin is geschreven. Als er in de tekst woorden of zinnen voorkomen in een andere taal dan die van de webpagina, brengt markering van die taal hulpmiddelen op de hoogte. Dit kan door in het HTML-element waarbinnen deze tekst staat het attribuut lang mee te geven.

Dan wordt tekst in die andere taal correct uitgesproken en daardoor beter te begrijpen voor gebruikers die de website laten voorlezen, bijvoorbeeld door screenreaders.

Er is een uitzondering voor eigennamen, technische termen, woorden in een onbekende taal, en woorden of zinsdelen die deel uitmaken van het jargon van de omliggende tekst.

Met het lang-attribuut breng je over welke taal (een deel van) je tekst heeft. Dan kunnen hulptechnologieën als screenreaders of vertaalsoftware daarop handelen. In het geval van screenreaders bijvoorbeeld door de tekst met de juiste stem voor te lezen.

Of de juiste stem ook echt wordt gebruikt is afhankelijk van de instellingen van de gebruikte screenreader.

Het gedrag van het broodkruimelpad is voorspelbaar

WCAG: 3.2.1 Bij focus

Verras een gebruiker niet als die een interactief element focus geeft. Maak functionaliteit voorspelbaar en daardoor goed te begrijpen.

Als een gebruiker een component focus geeft met het toetsenbord of door erop te klikken met de muis, zorg dan dat die actie niet automatisch een contextwijziging veroorzaakt.

Bij een contextwijziging verandert onverwacht de indeling, informatie, toetsenbordfocus of functionaliteit. Bijvoorbeeld door het direct versturen van een formulier na het kiezen van een select-optie, waarna de gebruiker naar een andere pagina wordt doorgestuurd.

Als het broodkruimelpad op meerdere pagina's voorkomt, staat het overal op dezelfde plek en de links in het broodkruimelpad staan in dezelfde volgorde

WCAG: 3.2.3 Consistente navigatie

Als je het broodkruimelpad op meerdere pagina's toevoegt, zijn er een aantal dingen om rekening mee te houden:

Het broodkruimelpad moet op alle pagina's in dezelfde relatieve volgorde op de pagina voorkomen. Bijvoorbeeld: Het broodkruimelpad staat altijd onder de header en boven de eerste kop op de pagina.
De links in het broodkruimelpad staan op alle pagina's in dezelfde relatieve volgorde. Bijvoorbeeld: Als de link naar de homepage in het broodkruimelpad staat, is dit op iedere pagina waar dit zo is de eerste link in het broodkruimelpad.

NL Design System richtlijnen:

Consistente navigatie

De contrastratio tussen de tekst en de achtergrondkleur in het broodkruimelpad is hoog genoeg

WCAG: 1.4.3 Contrast (minimum)

De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:

4,5:1 contrast voor normale tekst.
3:1 contrast voor grotere letters (vanaf 24 pixels).
3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).

Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.

NL Design System richtlijnen:

Het broodkruimelpad bevat niet onnodig afbeeldingen van tekst

WCAG: 1.4.5 Afbeeldingen van tekst

Laat tekst buiten afbeeldingen.

Als je losse tekst een vergelijkbaar uiterlijk kan geven als in een afbeelding, laat het dan losse tekst zijn. Er is een uitzondering als de tekst onderdeel is van een logo.

Sommige mensen hebben teksten nodig met een ander uiterlijk. Dit kan bij losse tekst en niet bij afbeeldingen.

Niet-tekstuele content in het broodkruimelpad heeft een contrastratio van minimaal 3:1 met de achtergrond

WCAG: 1.4.11 Contrast van niet-tekstuele content

Als het broodkruimelpad niet-tekstuele content zoals afbeeldingen bevat, bijvoorbeeld een huisje voor de homepage en iconen van / of > tussen de links, dan is het contrast tussen de afbeelding en de achtergrond minimaal 3:1. Dit is te controleren met de Contrast checker.

NL Design System richtlijnen:

Zorg voor voldoende kleurcontrast voor niet-tekstuele content

Het zichtbaar wanneer links in het broodkruimelpad toetsenbordfocus hebben

WCAG: 2.4.7 Focus zichtbaar

Wanneer het element de toetsenbordfocus krijgt is de focus zichtbaar.

Verberg de standaard browserfocusstijl nooit met outline:none zonder er een goede focusstijl voor in de plaats te zetten die rekening houdt met goede zichtbaarheid.

NL Design System richtlijnen:

Het aanwijsgebied van de links in het broodkruimelpad is groot genoeg

WCAG: 2.5.8 Grootte van het aanwijsgebied (minimum)

Zorg ervoor dat de aanklikbare elementen op een pagina groot genoeg zijn om makkelijk aan te klikken met een muis of vinger.

Hierbij geldt dat het aan te klikken gebied ten minste 24 bij 24 pixels groot is, behalve als het aanklikbare element en de ruimte om het element samen tenminste 24 pixels groot zijn.

Hou als dat mogelijk is een groter aanwijsgebied van 44 bij 44 pixels aan, om ook te voldoen succescriterium 2.5.5 Grootte van het aanwijsgebied (uitgebreid)

NL Design System richtlijnen:

Het is duidelijk zichtbaar wanneer links in het broodkruimelpad toetsenbordfocus hebben

WCAG: 2.4.13 Focusweergave

Er is een goed zichtbare focusindicator. Dit doe je met een minimale dikte van 2 pixels en een minimaal contrast van 3:1 ten opzichte van aangrenzende kleuren. Hou ook rekening met het contrast met de verschillende achtergrondkleuren waarop een element gebruikt kan worden. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen.

NL Design System richtlijnen:

Als het broodkruimelpad op meerdere pagina's voorkomt, ziet het er hetzelfde uit en werkt het hetzelfde

WCAG: 3.2.4 Consistente identificatie

Onderdelen die hetzelfde doen moeten ook hetzelfde te herkennen zijn.

Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar

WCAG: 1.4.4 Herschalen van tekst

De gebruiker moet tekst twee keer (200%) kunnen vergroten. Het gaat hierbij alleen om het vergroten van tekst en niet om bijvoorbeeld afbeeldingen of de layout. Alle functies moeten werken en zichtbaar zijn. Alle tekst moet leesbaar zijn. Er mag geen inhoud buiten beeld vallen, verborgen zijn of maar gedeeltelijk zichtbaar zijn.

Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar.

Een broodkruimelpad mag van vorm veranderen bij het vergroten of aanpassen van tekst, of bij inzoomen, als het broodkruimelpad door het doorlopen op een volgende of meerdere regels teveel ruimte in beslag neemt.

NL Design System richtlijnen:

Bij inzoomen gaat er geen informatie of functionaliteit verloren

WCAG: 1.4.10 Reflow

De gebruiker moet de webpagina bij een schermgrootte van 1280 bij 124 pixels tot 400% kunnen vergroten in de browser. Het gaat hierbij om alle elementen van een webpagina.

Alle functies moeten werken en zichtbaar zijn. Alle tekst moet leesbaar zijn.

Er mag geen inhoud buiten beeld vallen, onbereikbaar of verborgen zijn of gedeeltelijk verborgen worden door andere inhoud wanneer de gebruiker 400% inzoomt of op een buitengewoon klein scherm werkt (320 bij 256 CSS).

Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar

WCAG: 1.4.12 Tekstafstand

Tekst kan op een aantal manieren aangepast worden, door mensen voor wie dat prettig is.

Alle tekst moet leesbaar blijven. Er mag geen inhoud buiten beeld vallen, onbereikbaar of verborgen zijn of maar gedeeltelijk zichtbaar zijn.

Het gaat om:

De ruimte tussen tekstregels kan relatief groot ingesteld worden, zodat de ruimte tussen tekstregels anderhalf keer groter is dan de hoogte van een tekstregel zelf.
De ruimte tussen alinea's kan ingesteld worden op minimaal de twee keer de hoogte van een tekstregel.
De ruimte tussen letters kan 12% groter worden ingesteld dan normaal.
De ruimte tussen woorden kan 16% groter worden ingesteld dan normaal.

Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.

Links in het broodkruimelpad zijn bereikbaar en bedienbaar met het toetsenbord

WCAG: 2.1.1 Toetsenbord

Je kunt het element focussen met de tabtoets en activeren met de spacebar en de entertoets.

NL Design System richtlijnen:

Het broodkruimelpad zorgt niet voor een toetsenbordval

WCAG: 2.1.2 Geen toetsenbordval

Focus die met een toetsenbord geplaatst kan worden, moet ook met het toetsenbord weg te halen zijn.

De focus volgorde volgt de hiërarchische structuur van het broodkruimelpad

WCAG: 2.4.3 Focus volgorde

De links in het broodkruimelpad krijgen afzonderlijk toetsenbordfocus met de Tab-toets (en shift + Tab-toets). De focusvolgorde volgt de hierarchische structuur in het broodkruimelpad.

Het zichtbaar wanneer links in het broodkruimelpad toetsenbordfocus hebben

WCAG: 2.4.7 Focus zichtbaar

Wanneer het element de toetsenbordfocus krijgt is de focus zichtbaar.

Verberg de standaard browserfocusstijl nooit met outline:none zonder er een goede focusstijl voor in de plaats te zetten die rekening houdt met goede zichtbaarheid.

NL Design System richtlijnen:

De links in het broodkruimelpad worden niet bedekt door andere content

WCAG: 2.4.11 Focus niet bedekt (minimum)

Een onderdeel dat toetsenbordfocus heeft mag niet volledig bedekt zijn.

Het is duidelijk zichtbaar wanneer links in het broodkruimelpad toetsenbordfocus hebben

WCAG: 2.4.13 Focusweergave

NL Design System richtlijnen:

Informatieve afbeeldingen hebben een alternatieve tekst en decoratieve tekens en iconen zijn verborgen

WCAG: 1.1.1 Niet-tekstuele content

Als het broodkruimelpad een afbeelding bevat, bijvoorbeeld een huisje om de homepage aan te geven, heeft de afbeelding een alternatieve tekst. Als deze afbeelding een link bevat, beschrijft de alternatieve tekst ook het linkdoel.

Als tussen de links in het broodkruimelpad tekens staan, zoals een schuine streep of een groter-dan-teken, zijn deze verborgen voor hulpsoftware. De relatie tussen de links wordt namelijk al op een andere manier duidelijk gemaakt aan bezoekers die gebruik maken van een screenreader, door de georderende lijst (ol) binnen het nav element.

NL Design System richtlijnen:

Het is duidelijk dat het om een navigatiemenu gaat en de relatie tussen de links in het broodkruimelpad is voor iedereen duidelijk

WCAG: 1.3.1 Info en relaties

De relatie tussen de links in het broodkruimelpad moet niet alleen visueel, maar ook voor bezoekers die gebruik maken van een screenreader duidelijk zijn.

Het broodkruimelpad is herkenbaar als navigatiemenu door het nav element te gebruiken, of door role="navigation" te gebruiken. Gebruik bij voorkeur altijd HTML elementen, tenzij het echt niet anders kan.

Het navigatiemenu heeft een toegankelijke naam om het te onderscheiden van andere navigatiemenu's op de pagina. Bijvoorbeeld met aria-label, of door met aria-labelledby te verwijzen naar een visueel verborgen h2 element in het broodkruimelpad.

De links in het broodkruimelpad staan binnen het nav element in een georderende lijst: het ol element. Dit geeft de hiërarchie in de links aan. Iedere link is afzonderlijk opgemaakt met een li element en staat genest binnen het ol element.

De huidige pagina in het broodkruimelpad hoeft niet als link opgemaakt te zijn, maar bevat wel het aria-current="page" attribuut.

<nav aria-label="Broodkruimelpad">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/zelfregelen">Zelf regelen</a></li>
    <li><a aria-current="page" href="/zelfregelen/rijbewijsaanvragen">Rijbewijs aanvragen</a></li>
  </ol>
</nav>

De leesvolgorde van tekst en links in het broodkruimelpad is voor iedereen logisch

WCAG: 1.3.2 Betekenisvolle volgorde

Zorg ervoor dat iedereen de tekst van een webpagina kan volgen en dat het begrip hiervan niet alleen afhankelijk is van de visuele presentatie.

Wanneer een gebruiker de webpagina inzoomt, of met een screenreader de inhoud van boven naar beneden leest, moet de informatie en de volgorde van de informatie logisch en begrijpelijk zijn.

Als het broodkruimelpad tekst in een andere taal dan de hoofdtaal van de pagina bevat, wordt hier een taalwissel voor aangegeven

WCAG: 3.1.2 Taal van onderdelen

Dan wordt tekst in die andere taal correct uitgesproken en daardoor beter te begrijpen voor gebruikers die de website laten voorlezen, bijvoorbeeld door screenreaders.

Er is een uitzondering voor eigennamen, technische termen, woorden in een onbekende taal, en woorden of zinsdelen die deel uitmaken van het jargon van de omliggende tekst.

Of de juiste stem ook echt wordt gebruikt is afhankelijk van de instellingen van de gebruikte screenreader.

Het broodkruimelpad en de links in het broodkruimelpad hebben een toegankelijke naam, rol en status

WCAG: 4.1.2 Naam, rol, waarde

Het broodkruimelpad staat in een nav element, of heeft role="navigation", met een toegankelijke naam (bijvoorbeeld 'broodkruimelpad'). Gebruik bij voorkeur altijd HTML elementen, tenzij het echt niet anders kan.

De links in het broodkruimelpad staan genest in een ol element en iedere link staat in een li element. Gebruik geen role="list', omdat de hiërarchie tussen de links dan verloren gaat.

De links in het broodkruimelpad hebben de rol van link. Gebruik hiervoor bij voorkeur het a element (met een href attribuut). Het is mogelijk om met ARIA een role="link" toe te voegen aan een ander element dan een a, maar dit is niet aan te raden. Heb je het absoluut nodig, zorg er dan voor dat het gekozen element ook voldoet aan de verwachte toetsenbordinteractie, focusstijl, etc. Let erop dat je hiervoor JavaScript nodig hebt.

De huidige (laatste) pagina in het broodkruimelpad geeft daarnaast ook met aria-current="page" aan dat het om de huidige pagina gaat.

Help component verbeteren

We vinden het belangrijk dat de component Breadcrumb Navigation goed te gebruiken is door iedereen. Help je mee?

Vul de GitHub Discussion aan met de eisen en wensen voor jouw project of organisatie.
Draag bij aan de voortgang van Breadcrumb Navigation door te zorgen dat deze aan meer checkpoints van de Definition of Done voldoet. Deze houden we bij in de projectborden bij de publieke GitHub Backlog.

Breadcrumb Navigation

Definition of Done

Help Wanted - 11 van 11

Community - 15 van 15

Candidate - 0 van 33

Community implementaties

Amsterdam

Snel aan de slag

ams-breadcrumb in CSS

ams-breadcrumb in React

Utrecht

Snel aan de slag

utrecht-breadcrumb-nav in CSS

utrecht-breadcrumb-nav in Web Component

utrecht-breadcrumb-nav in React

utrecht-breadcrumb-nav in Vue

Rijkshuisstijl Community

Snel aan de slag

rhc-breadcrumb-nav in CSS

rhc-breadcrumb-nav in Web Component

rhc-breadcrumb-nav in React

RVO

Snel aan de slag

rvo-breadcrumbs in CSS

rvo-breadcrumbs in React

Den Haag

Snel aan de slag

breadcrumb in CSS

Acceptatiecriteria

Toegankelijkheid algemeen

Toegankelijkheid visueel ontwerp

Toegankelijkheid zoom en herschalen

Toegankelijkheid toetsenbord

Toegankelijkheid screenreader

Help component verbeteren