Navigation
Breadcrumbs
Brødkrummer er en sekundær navigationssti, der viser, hvor brugeren befinder sig i sitets hierarki, og giver ét klik tilbage til hvert overliggende niveau. De supplerer den primære navigation — de erstatter den ikke. Her er evidensen og reglerne.
Definition
Breadcrumbs er en sekundær navigation, der afspejler sidens placering i informationshierarkiet — typisk “Forside / Kategori / Side”.
Hvorfor det virker
Brødkrummer understøtter wayfinding og har været en anbefaling i årtier: Nielsen Norman Group har anbefalet dem siden 1995, fordi de giver stor gevinst for næsten ingen plads i UI’et. Det er ekspertvejledning baseret på brugertest, ikke en effektmåling.1
De hjælper især brugere, der lander non-lineært — fx via søgning eller en kampagne. Baymard fandt, at brugere, der ankommer til en produktside uden for det lineære flow, bruger hierarki-brødkrummen til at skifte til en browsing-strategi og finde relaterede produkter.2
E-handel implementerer dem ofte mangelfuldt: i Baymards benchmark af 50 store webshops (2013) havde 68% en »sub-par« løsning — 45% havde kun én type, og 23% havde slet ingen brødkrummer. Konklusionen var, at sites bør tilbyde både en hierarki-baseret OG en historik-baseret (»tilbage til resultater«) brødkrumme.2
Hvornår du bruger det — og hvornår ikke
Hvornår du bruger det
- Sitet har et dybt hierarki med flere niveauer.
- Brugere lander ofte direkte på undersider fra søgning.
- Man skal hurtigt kunne hoppe et niveau op.
Hvornår du bør undgå det
- Sitet er fladt med kun ét eller to niveauer.
- Flowet er en lineær wizard uden hierarki.
Best practices
Erstat aldrig den primære navigation
Brødkrummer skal supplere global og lokal navigation — ikke stå i stedet for dem.1
Brug placerings-/hierarki-baserede brødkrummer
Vis sitets faste struktur, ikke sessionens klikhistorik (det er browserens tilbage-knaps opgave).1
Sidste led = den aktuelle side, og det bør ikke være et link
Alle øvrige led skal linke til en overliggende side, og stien starter typisk med et link til forsiden.1
Vis én konsistent sti ved flere mulige forældre
Hører en side under flere kategorier (polyhierarki), så vælg én vej gennem hierarkiet frem for at forvirre med flere.1
Overvej at droppe dem på flade sites
På sites med kun 1–2 niveauer eller rent lineære flows tilfører brødkrummer sjældent værdi.1
På e-handel: tilføj også »tilbage til resultater«
En historik-baseret mulighed ved siden af hierarki-brødkrummen lader brugere bevare filtre og sortering fra søgningen.2
Gør dem tilgængelige
Pak stien i et nav-landmark med aria-label, strukturér links i en ordnet liste (ol), og markér den aktuelle side med aria-current="page".3
Typiske fejl
Brødkrummer som erstatning for hovednavigationen
De er et supplement, ikke en primær navigation.
Det sidste led gjort til et link
Den aktuelle side bør ikke være klikbar — det er redundant og bryder forventningen.
Klikhistorik i stedet for sitehierarki
En historik-sti som primær type duplikerer blot browserens tilbage-knap uden at give placeringsforståelse.
Kun hierarki-krummer på e-handel
Uden en »tilbage til resultater«-mulighed mister brugere fra søgning deres filtre.
Manglende tilgængeligheds-markup
Intet nav-landmark, ingen aria-label, intet aria-current.
Eksempler i praksis
Store webshops
Ofte fremhævet: e-handelssites kombinerer en placeringsbaseret sti med et »tilbage til resultater«-link, der bevarer brugerens oprindelige søgning og filtre.
Dybe indholds-sites
Dokumentations- og medie-sites med mange niveauer bruger brødkrummer til at vise placering og give ét klik op i hierarkiet.
Ofte stillede spørgsmål
Hvad er en brødkrummesti?
En sekundær navigationssti, typisk øverst på siden, der viser hvor du er i sitets hierarki (fx Forside › Herre › Sko › Løbesko) og lader dig hoppe ét klik op til et hvilket som helst overliggende niveau.
Erstatter brødkrummer den almindelige menu?
Nej. Ifølge Nielsen Norman Group skal brødkrummer supplere den globale og lokale navigation — ikke erstatte den.
Skal det sidste led i stien være et link?
Nej. Det sidste led er den side, du står på nu, og det bør ikke være klikbart. Kun de overliggende niveauer skal være links.
Hvad er forskellen på placeringsbaserede og historik-baserede brødkrummer?
Placeringsbaserede (hierarki) viser sitets faste struktur uanset hvordan du kom frem. Historik-baserede fungerer som en »tilbage«-knap til din forrige side med filtre og sortering bevaret. På e-handel anbefaler Baymard at bruge begge.
Er brødkrummer nødvendige på alle sites?
Nej. På flade sites med kun 1–2 niveauer eller rent lineære flows tilfører de sjældent værdi. De giver mest mening på dybe, hierarkiske sites.
Hvordan gør jeg brødkrummer tilgængelige?
Pak dem i et nav-element med aria-label, strukturér linkene i en ordnet liste (ol), og markér den aktuelle side med aria-current="page". Det følger W3C’s WAI-ARIA-anbefaling.