Broodkruimelpad – Niek Derksen

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.

Een broodkruimelpad laat zien waar je bent op een website. Het is een lijst met links naar bovenliggende pagina’s. Je toont hiermee de hiërarchische structuur van je website. Gebruikers zien waar ze zijn en kunnen makkelijk terug naar vorige niveaus.

Technische opbouw

Maak de container een <nav>-element
Geef de container een toegankelijke naam
Structureer de links met <ol> (geordende lijst)
Laatste item (huidige pagina) in het broodkruimelpad:
- Als het laatste item geen link is: geef de container (<li>) dan aria-current="page"
- Als het laatste item wel een link is: geef de link dan aria-current="page"

Voorbeeld broodkruimelpad

HTML

<!-- Broodkruimelpad code -->
<nav aria-label="Broodkruimelpad">
  <ol class="breadcrumb">
    <li>
      <a href="/">
        Home
      </a>
    </li>
    <li>
      <a href="/producten">
        Producten
      </a>
    </li>
    <li>
      <a href="/producten/categorie">
        Categorie
      </a>
    </li>
    <li aria-current="page">
      Huidige pagina
    </li>
  </ol>
</nav>

CSS

/* Broodkruimelpad stijlen */
.breadcrumb {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li:not(:last-child)::after {
  content: '»'; /* of een ander teken */
  margin: 0 8px;
}

Beoordeling

Component

(1.3.1) Het broodkruimelpad moet een <nav>-element gebruiken als container
(4.1.2) Het broodkruimelpad moet een toegankelijke naam hebben
- (2.4.6) De toegankelijke naam moet beschrijven dat het gaat over een broodkruimelpad
(1.3.1) Het broodkruimelpad moet de links structureren in een <ol>-element
(1.3.1) Het laatste item moet aria-current="page" hebben als het de huidige pagina weergeeft

Technische opbouw

Voorbeeld broodkruimelpad

Beoordeling

Component

Algemeen

Content

Bedieningselementen

Bronnen