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.

Visuella exempel

Ui-kittet

Brödsmulor

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 ha role="navigation" och innehålla en aria-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