Brödsmula

Ange den aktuella sidans plats i en navigeringshierarki som automatiskt lägger till separatorer via CSS.

Exempel

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Byte av separator

Separatorer läggs automatiskt till i CSS genom ::beforeoch content. De kan ändras genom att ändra $breadcrumb-divider. Citatfunktionen behövs för att generera citattecken runt en sträng, så om du vill ha som> separator kan du använda detta:

$breadcrumb-divider: quote(">");

Det är också möjligt att använda en base64 inbäddad SVG-ikon :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

Separatorn kan tas bort genom att ställa $breadcrumb-dividerin none:

$breadcrumb-divider: none;

Tillgänglighet

Eftersom brödsmulor ger en navigering, är det en bra idé att lägga till en meningsfull etikett som aria-label="breadcrumb"beskriver typen av navigering som tillhandahålls i <nav>elementet, samt att tillämpa en aria-current="page"på det sista objektet i uppsättningen för att indikera att den representerar den aktuella sidan.

För mer information, se WAI-ARIA författarpraxis för brödsmulemönstret .