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 ::before
och 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-divider
in 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 applicera 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 ARIA Authoring Practices Guide brödsmulamönster .