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.

Har du noen innspill til komponenten?Gi oss beskjed!

Test komponenten

Kodebygger

PktBackLink

Innhold
Teksten til tilbake-lenken
Tilgjengelighet
Teksten til navigasjonselementet som leses opp av skjermlesere.
Teknisk
URL til siden lenken skal peke til
React: Funksjon for å rendre en egendefinert lenkekomponent (f.eks. Next.js Link eller React Router Link). Mottar et IRenderLink-objekt med href, className, children og props. Standard er et vanlig <a>-element.

Relaterte komponenter

Breadcrumbs

Når du vil vise hele stien tilbake eller et høyere nivå i hierarkiet.

Button (med tilbake-ikon)

Når “tilbake” er en aktiv handling brukeren må ta stilling til.

Header

Header og header menu gir full tilgang til hovednavigasjonen.

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.

TypeBruk
BacklinkBrukes for å gå ett steg tilbake, for eksempel til en overordnet side eller oversikt
BreadcrumbsViser 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.

Eksempel som illustrerer forskjellen mellom backlink og breadcrumb.

Retningslinjer for bruk

  • brukeren har navigert fra en liste eller oversikt
  • du ikke bruker brødsmulesti, men trenger lokal tilbake-navigasjon
  • du vil forsterke informasjonshierarkiet på siden
  • 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

Gjør det tydelig for brukeren hvor de havner etter lenkeklikk

Unngå

Unngå vage eller utydelige tekster, tilbake til hva?

Responsivitet

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.

Backlink på mobil

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:

WCAG 2.1 Link Purpose (W3C)

Hvordan lenketekst skal gi mening uten å være avhengig av konteksten.

Universell utforming av lenker (UUtilsynet)

Semantikk, lesbarhet og teknisk tilrettelegging i lenker og knapper.

Anatomi

ElementBeskrivelse
1. IkonEt venstrevendt pilikon som signaliserer tilbake eller forrige
2. LenketekstBeskrivende tekst som forteller hvor brukeren kommer etter klikk
Elementene i anatomien til backlink.

Implementasjon i kode

Hvordan ta komponenten i bruk?

import @oslokommune/punkt-elements/dist/pkt-backlink.js;
import { PktBackLink } from '@oslokommune/punkt-react';
<script src="https://punkt-cdn.oslo.kommune.no/19/elements/pkt-backlink.js" type="module"></script>

Testing

Elements: 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");

Egendefinert lenkekomponent (kun React)

Bruk renderLink for å integrere med klient-side-rutere uten å legge til en ruteravhengighet i Punkt. Funksjonen mottar { href, className, children, props } og skal returnere en React-node.

// React Router
import { Link } from 'react-router-dom'
<PktBackLink
  href="/oversikt"
  text="Tilbake til oversikten"
  renderLink={({ href, className, children }) => (
    <Link to={href} className={className}>{children}</Link>
  )}
/>

Hvis renderLink ikke sendes inn, brukes et vanlig <a>-element.

Egenskaper

PktBackLink

Props

Prop:
href?
Type:
string
Standardverdi:
"/"
Beskrivelse:
URL til siden lenken skal peke til
Prop:
text?
Type:
string
Standardverdi:
"Forsiden"
Beskrivelse:
Teksten til tilbake-lenken
Prop:
ariaLabel?
Status:
DeprecatedBruk strings={{ backlink: { label: '…' } }} eller setPktStrings().
Type:
string
Standardverdi:
"Gå tilbake til forrige side"
Beskrivelse:
Teksten til navigasjonselementet som leses opp av skjermlesere.
Prop:
renderLink?
Type:
(args: IRenderLink) => ReactNode
Beskrivelse:
React: Funksjon for å rendre en egendefinert lenkekomponent (f.eks. Next.js Link eller React Router Link). Mottar et IRenderLink-objekt med href, className, children og props. Standard er et vanlig <a>-element.

Events

Event:
onClick
Type:
(event: React.MouseEvent<HTMLAnchorElement>) => void
Beskrivelse:
React: Klikk-event for tilbake-lenken

Objektet som sendes til renderLink i Link, BackLink og Breadcrumbs. Kun React — brukes til å bytte ut standard <a> med f.eks. Next.js Link eller React Router Link.

Prop:
href
Type:
string
Beskrivelse:
Mål-URL for lenken.
Prop:
className
Type:
string
Beskrivelse:
CSS-klasser Punkt har satt på lenken.
Prop:
children
Type:
ReactNode
Beskrivelse:
Innhold/label som skal rendres inni lenken.
Prop:
props
Type:
AnchorHTMLAttributes<HTMLAnchorElement>
Beskrivelse:
Resten av anchor-attributter (f.eks. onClick, aria-*) som skal spreades på lenken.