Breadcrumbs

Live demo

Relaterte komponenter

Varianter

Punkt støtter både backlink og breadcrumbs som navigasjonsmønstre. Du må være konsekvent i løsningen din og kun bruke én av dem.

Type	Bruk
Backlink	Brukes for å gå ett steg tilbake, for eksempel til en overordnet side eller oversikt
Breadcrumbs	Viser hvor brukeren er i en hierarkisk struktur og gir mulighet til å hoppe til et hvilket som helst nivå

Viktig: Hvis løsningen din skal brukes sammen med Oslo kommune sine åpne nettsider (www.oslo.kommune.no), skal du alltid bruke backlink, aldri breadcrumbs.

Retningslinjer for bruk

Bruk breadcrumbs når

• løsningen har et tydelig hierarki
• du vil gi oversikt over hvor brukeren er i strukturen
• brukeren skal kunne hoppe tilbake til et overordnet nivå

Unngå breadcrumbs når

• hierarkiet er grunt (bruk heller backlink)
• brukerens vei tilbake ikke er entydig
• det finnes annen navigasjon som dekker behovet

Skriv korte og tydelige lenketekster

Hvert nivå bør ha et enkelt og beskrivende navn. Unngå tekniske eller interne navn (f.eks. “/nav/root/sub/area”).

Gjør slik

Fortell brukeren tydelig hva de tidligere sidene omhandler

Unngå

Unngå lange titler og uklare sidetitler

Responsivitet

Breadcrumbs bryter automatisk linje dersom det ikke er nok plass på én linje.

• Lenketekstene skaleres ikke ned
• Det er ingen automatisk forkorting eller komprimering (f.eks. «…»)
• Separatoren (>) vises mellom hvert nivå, uavhengig av skjermstørrelse

Sørg for at breadcrumbs fungerer visuelt i din løsning, spesielt hvis den vises sammen med tittel, filter eller toppnavigasjon.

Det vanligste er å gå for backlink på mobil på grunn av mindre plass, du må selv vurdere hva som fungerer best i din løsning.

Universell utforming

Lenketeksten må gi mening alene

Teksten i breadcrumbs skal være tydelig og fortelle brukeren hvor lenken går. Unngå vage ord som bare «Tilbake», skriv heller «Tilbake til oversikten» eller noe annet passende.

Fokus og tastaturnavigasjon

Brukeren skal kunne navigere til breadcrumbs med Tab, og aktivere den med Enter. Komponenten har synlig fokusindikator når den er aktiv.

Ikke erstatt hovednavigasjonen

Ikke bruk breadcrumbs som eneste måte å navigere tilbake på. Den skal være et hjelpetillegg, ikke erstatte hovedmenyen.

Les mer om universell utforming av breadcrumbs:

Anatomi

Element	Beskrivelse
1. Lenke	Viser hvert nivå i hierarkiet. Hver lenke tar brukeren til det tilhørende nivået
2. Ikon	Ikon mellom hvert nivå. Brukes for å skille nivåene
3. Aktivt nivå	Viser gjeldende side. Den siste lenken i breadcrumbs-stien er ikke klikkbar

Implementasjon i kode

Breadcrumbs er default en anchor-link komponent. Ønsker du å bruke React router(Link) kan du spesifisere dette i props navigationType med verdien router. Komponenten bør bare brukes med maks 4 lenker.

Hvordan ta komponenten i bruk?

Props og tokens

Prop	Type	Beskrivelse
breadcrumbs	array	Liste over brødsmuler
navigationType	router anchor	Hvordan skal brødsmulene navigeres?

Farger

Variant	CSS Variabel
Icon	--pkt-color-brand-dark-blue-1000
Text	--pkt-color-text-body-default