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)