Backlink

Release dato: 14.09.2023

Sist oppdatert: 28.03.2025

Backlink (tilbake-lenke) hjelper brukeren med å forstå hvor de er, og gir en enkel måte å navigere tilbake til forrige steg i strukturen. Den bidrar til bedre oversikt og forutsigbarhet, særlig på undersider eller når man navigerer dypt i et hierarki.

Bruk backlink når du vil gi brukeren en ryddig og eksplisitt vei tilbake, enten til en oversiktsside, et forrige steg eller en forside i en seksjon.

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.

Forskjellen mellom backlink og breadcrumb.

Retningslinjer for bruk

Bruk backlink når

brukeren har navigert fra en liste eller oversikt
du ikke bruker brødsmulesti, men trenger lokal tilbake-navigasjon
du vil forsterke informasjonshierarkiet på siden

Unngå backlink når

det allerede finnes annen navigasjon som dekker samme behov (for eksempel toppmenyen)
brukerens vei tilbake ikke er entydig eller åpenbar
du ikke vet hvilken vei tilbake som gir mening

Skriv tydelige lenketekster

Lenketeksten skal beskrive hvor brukeren kommer. Unngå vage tekster som bare «Tilbake».

Gode eksempler:

«Tilbake til oversikten»
«Tilbake til søkeresultatene»

Gjør slik

Eksempel på riktig innhold på lenken — Gjør det tydelig for brukeren hvor de havner etter klikk

Unngå

Eksempel ikke egnet innhold på lenken — Unngå vage eller utydelige tekster, tilbake til hva?

Responsivitet

Backlink skal alltid plasseres øverst på siden

Backlink fungerer godt på både små og store skjermer. Backlink skaleres ikke ned på små skjermer, men bryter linjer der det er nødvendig. Ikon og tekst vises alltid sammen.

Test plassering på mobil

På mobil vises backlink ofte øverst på siden. Pass på at den ikke konkurrerer med navigasjonsmeny eller tittel. Sørg for god luft over og under komponenten.

Universell utforming

Lenketeksten må gi mening alene

Teksten i backlinken 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 backlinken med Tab, og aktivere den med Enter. Komponenten har synlig fokusindikator når den er aktiv.

Ikke erstatt hovednavigasjonen

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

Les mer om universell utforming av backlink:

Anatomi

Element	Beskrivelse
1. Ikon	Et venstrevendt pilikon som signaliserer tilbake eller forrige
2. Lenketekst	Beskrivende tekst som forteller hvor brukeren kommer etter klikk

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements og React: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-backlink");

Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.

Props og tokens

Prop	Type	Beskrivelse
`href`	`String`	URL til siden lenken skal peke til
`text`	`String`	Teksten til tilbake-lenken
`ariaLabel`	`String`	Teksten til navigasjonselementet som leses opp av skjermlesere

Event	Beskrivelse
`onClick`	React: Klikk-event for tilbake-lenken

Farger

Element	CSS Variabel
Icon
Text