Breadcrumbs

Pakke: ds-navigation

Breadcrumbs (brødsmulesti) viser brukeren en sti i nettstedets hierarki og gjør det lett å navigere tilbake i strukturen.  

Eksempel

Brødsmulestil åpen og kollapset

Egnet til:

  • å vise brukeren hvor de er i sidestrukturen.
  • å la brukeren hoppe direkte til et nivå som ligger høyere i sidestrukturen.

Uegnet til:

  • lineær navigasjon i et skjema eller prosess, for eksempel stegene i en StepList
  • tilfeller der du bare har ett eller to nivåer i løsningen. 

Teknisk dokumentasjon

Se Breadcrumbs i Storybook for tekniske detaljer.

Hvordan bruke komponenten  

  • Brødsmulestien skal alltid plasseres i øverste del av siden; under toppbanneret, men over tittelen på siden.
  • Vis brødsmulestien på alle sider bortsett fra hovedsiden. Det bidar til å skape forutsigbarhet på tvers av sider i løsningen din.
  • Når du bare har ett eller to nivåer i strukturen din trenger du ikke bruke brødsmulesti. Velg da heller en tilbakelenke som for eksempel «Gå til min side».
  • Komponenten klapper sammen dersom den går over flere linker (standard). Når du trykker på ekspander-ikonet vil hele brødsmulestien vises igjen. Du kan skru av denne oppførselen ved å bruke propen shouldCollapse
Plassering i toppen
Brødsmulesti plassert i toppen av siden

Universell utforming  

  • Komponenten er bygget opp ved hjelp av et <nav>-element, og vil lese opp «Jeg er her» på valgt språk.
  • Siste element representerer aktiv eller åpen side som standard. Teknisk sett får elementet da aria-current="page" for å støtte opplesing. Du kan skru av denne mekanismen ved å bruke propen showLastItemAsCurrentPage
  • På mobil settes fokus til første brødsmule, dersom bruker velger å vise hele stien.