Brödsmulor
Brödsmulor (Breadcrumbs) används för att göra det extra tydligt var i strukturen användaren befinner sig och för att förtydliga sidans sammanhang. Brödsmulor kan också användas för att navigera uppåt i strukturen.
Riktlinjer
- Brödsmulor placeras ovanför innehållet och under sidhuvudet, till vänster på sidan.
- Den sista brödsmulan ska avse sidan man befinner sig på.
- Varje brödsmula, förutom den sista, ska vara länkad till respektive sida.
- Brödsmulans namn ska vara samma som sidans namn, vilken även syns i huvudnavigationen. Sidans namn är inte alltid detsamma som rubrikens namn (H1).
- Den första brödsmulan ska vara länkad till startsidan och ha namnet "Start".
- Brödsmulor ligger direkt på bakgrundsfärgen, utan någon egen platta/bakgrund.
- Ikoner ska aldrig användas i brödsmulor.
- Brödsmulorna ska inte förkortas/trunkeras om kedjan blir lång. För att behålla syftet med orientering i struktur och sammanhang ska långa brödsmulor radbrytas.
Bra att tänka på
- Brödsmulor används aldrig för att visa steg i en process, till exempel i ett registreringsflöde. I det fallet ska brödsmulan sluta vid ingångssidan till flödet och se likadan ut genom alla sidor i flödet.
- Brödsmulor kan i vissa fall kompletteras med till-länk. Till exempel i navigering mellan ett sökresultat och en annons/profil (formuleras "Till sökresultatet", Till mina sidor").
Tillgänglig komponent
- Brödsmulan fungerar som navigeringslandmärke och
<nav>elementet ska harole="navigation"och innehålla enaria-label="Länkstig"för att beskriva vilken typ av navigation det handlar om. - Det sista steget i brödsmulorna som anger vilken sida användaren befinner sig på, ska ha attributet
aria-current="page".
Brödsmulor – WAI-ARIA Authoring Practices for the breadcrumb pattern
Kodexempel
Dokumentation för e-tjänster som vill lägga till brödsmulor utifrån routing efter e-tjänstens fysiska sida på webbplatsen finns på Confluence