Breadcrumbs

Release dato: 14.09.2023

Sist oppdatert: 16.05.2025

Breadcrumbs (brødsmulesti) viser brukeren hvor de er i strukturen, og gjør det mulig å navigere tilbake til høyere nivå. Den hjelper brukeren med å forstå hierarkiet og finne veien tilbake.

Har du noen innspill til komponenten?Gi oss beskjed!

Test komponenten

IBreadcrumb 1
Teksten som skal vises i brødsmulen.
URL-en brødsmulen skal lenke til.
IBreadcrumb 2
Teksten som skal vises i brødsmulen.
URL-en brødsmulen skal lenke til.
IBreadcrumb 3
Teksten som skal vises i brødsmulen.
URL-en brødsmulen skal lenke til.

Kodebygger

PktBreadcrumbs

Innhold
Liste over brødsmuler.
IBreadcrumb 1
Teksten som skal vises i brødsmulen.
URL-en brødsmulen skal lenke til.
IBreadcrumb 2
Teksten som skal vises i brødsmulen.
URL-en brødsmulen skal lenke til.
IBreadcrumb 3
Teksten som skal vises i brødsmulen.
URL-en brødsmulen skal lenke til.
Teknisk
Hvordan skal brødsmulene navigeres?
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

Backlink

En enkel lenke for å gå tilbake til forrige side eller et høyere nivå.

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

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

Eksempel på riktig innhold på breadcrumbs
Fortell brukeren tydelig hva de tidligere sidene omhandler

Unngå

Eksempel på ikke egnet innhold på breadcrumbs
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.

Breadcrumbs på mobil

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:

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. LenkeViser hvert nivå i hierarkiet. Hver lenke tar brukeren til det tilhørende nivået
2. IkonIkon mellom hvert nivå. Brukes for å skille nivåene
3. Aktivt nivåViser gjeldende side. Den siste lenken i breadcrumbs-stien er ikke klikkbar
Elementene i anatomien til breadcrumbs.

Implementasjon i kode

Breadcrumbs er tilgjengelig som både React-komponent og web component (Elements). Komponenten bør bare brukes med maks 4 lenker.

React: custom lenkekomponent

I React kan du injisere din egen lenkekomponent med renderLink-proppen. Dette er nyttig for routing-løsninger som Next.js Link, Tanstack Router Link, eller lignende.

<PktBreadcrumbs
  breadcrumbs={crumbs}
  renderLink={({ href, className, children }) => (
    <CustomLink to={href} className={className}>
      {children}
    </CustomLink>
  )}
/>

Elements: navigate-event for SPA-ruting

I Elements/HTML brukes navigate-eventet for å fange opp klikk på brødsmuler. Kall preventDefault() for å hindre vanlig navigasjon og håndter rutingen selv.

<pkt-breadcrumbs id="crumbs"></pkt-breadcrumbs>
<script>
  const el = document.querySelector('#crumbs')
  el.breadcrumbs = [
    { text: 'Hjem', href: '/' },
    { text: 'Tjenester', href: '/tjenester' },
    { text: 'Denne siden', href: '/tjenester/denne' },
  ]
  el.addEventListener('navigate', (e) => {
    e.preventDefault()
    minRouter.push(e.detail.item.href)
  })
</script>

Uten en navigate-lytter fungerer lenkene som vanlige <a>-elementer med full sidenavigasjon.

Hvordan ta komponenten i bruk?

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

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-breadcrumbs");

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

Egenskaper

PktBreadcrumbs

Props

Prop:
breadcrumbs
Type:
IBreadcrumb[]
Standardverdi:
[]
Beskrivelse:
Liste over brødsmuler.
Prop:
navigationType?
Type:
"router" | "anchor"
Standardverdi:
"anchor"
Beskrivelse:
Hvordan skal brødsmulene navigeres?
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:
navigate
Type:
—
Beskrivelse:
Elements: kalles ved klikk på en brødsmule-lenke (desktop eller mobil tilbake-lenke). detail inneholder item (IBreadcrumb), index og originalEvent. Kall preventDefault() på eventet for å stoppe nettleser-navigasjon.

IBreadcrumb

Prop:
text
Type:
string
Beskrivelse:
Teksten som skal vises i brødsmulen.
Prop:
href
Type:
string
Beskrivelse:
URL-en brødsmulen skal lenke til.

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.