Breadcrumbs

Status

Figma Publisert
CSS Publisert
Vue Publisert
React Publisert
Dokumentasjon Publisert

Om komponenten

Brødsmulestier (breadcrumbs) er sekundære navigasjonselementer som viser brukerens nåværende plassering i en applikasjon, løsning eller nettsted. Komponenten skal gjøre det mulig å raskt bevege seg tilbake til et overordnet nivå eller tidligere trinn.

Varianter

Punkt støtter både backlink og brødsmulesti. Det er viktig at du er konsistent i din løsning og kun bruker én av mulighetene.

Dersom du lager en løsning som henger sammen med Oslo kommune sine åpne nettsider (www.oslo.kommune.no) skal du alltid bruke backlink, aldri brødsmulesti.

Farger

Komponenten følger stylingen til standard lenker. Les mer om lenker her.

Slik bruker du komponenten

Brødsmulestier er nyttige og effektive der du har en stor mengde innhold organisert hierarkisk med mer enn to nivåer, brødsmulestien gir brukeren en kontekst for deres plassering i navigasjonshierarkiet.

  • Hver lenke i en brødsmulesti skal være kort og tydelig gjenspeile plasseringen eller siden den lenker tilbake til.
  • Det første nivået skal alltid være den første siden på nettstedet/løsningen, for deretter å gå dypere inn i informasjonsstrukturen etterhvert som brødsmulestien utvikler seg.

Vi har satt et maksimum antall nivåer på fire. Dersom du har en dypere arkitektur enn dette anbefaler vi å forenkle den, du kan lese mer om sidearkitektur og hierarki hos NNGroup her.

Brødsmulestien skal alltid plasseres i den øverste venstre delen av siden. Den skal være under menyen og hovednavigasjonen, men over sidetittelen.

På mobil styles brødsmulestien som backlink og viser bare det overordnede nivået på grunn av plassbesparelse.

Gjør slik/ikke gjør slik

  • Breadcrumbs skal alltid være sekundær og skal aldri erstatte primærnavigasjonen på løsningen eller siden din.
  • Unngå å bruke breadcrumbs for løsninger der du kun har ett enkelt nivå, for det kan skape visuelt støy (vurder evt å gå for backlink)
  • Breadcrumbs er ikke det samme som en stegindikator og bør ikke brukes til dette.

Anatomi

  1. Nivå 1
  2. Ikon
  3. Nivå 2
  4. Nivå 3 (aktiv side)