Komponenter

Breadcrumbs

Breadcrumbs hjelper brukarane med å forstå kvar dei er i ei struktur, og gjer det mogleg å navigere tilbake til høgare nivå.

Oversikt Kode Tilgjengelighet

Bruk breadcrumbs når

brukarane kan ønskje å gå tilbake til tidlegare nivå
brukarane treng hjelp med å forstå kvar dei er i strukturen

Unngå breadcrumbs når

navigasjonen er lineær, for eksempel for dei ulike stega i ein arbeidsflyt eller eit skjema

Eksempel

Vis berre nærmaste nivå

På mobil, eller når navigasjonsstien blir lang, kan du vise berre ei lenke til nærmaste overordna side. Ver konsistent i løysinga, og bruk anten denne varianten eller heile navigasjonsstien, ikkje begge delar.

Under er eit døme på korleis ein lang navigasjon ser ut.

Retningslinjer

Det er først når det er tre eller fleire nivå på ein nettstad at det er behov for breadcrumbs.

Plassering

Breadcrumbs skal alltid plasserast øvst til venstre på sida når det er venstre til høgre tekst. Den skal ligge under menyen og hovudnavigasjonen, men over sidetittelen.

Skjule breadcrumbs på mobil

Om du har lang navigasjon, kan du sette opp komponenten til å berre vise første og siste del av søkestien på mobil. Dette kan skje automatisk på skjermar som er smalare enn 650px, der vi berre viser lenka eitt nivå ned. Det ligg implementasjonsdøme på kode-fana.

Tekst

Teksten bør samsvare med overskriftene eller navigasjonen på nettsida, slik at det er lett å kjenne igjen nivåa.

Rediger denne siden på github.com (åpnes i ny fane)