<lm-breadcrumb> – Brødsmulesti / Breadcrumb

Om komponenten

Kanonisk navn: <lm-breadcrumb>
Synonymer: stiangivelse, hierarkinavigasjon, breadcrumb, brødsmule
Kategori: navigasjon
ARIA-mønster: Breadcrumb
Parts: nav
Native-first-vurdering: HTML har ingen dedikert brødsmulesti-mekanisme utover vanlige <a>-lenker i et <nav> - komponenten legger derfor kun til den strukturelle wrapperen, separator-visning og automatisk aria-current="page" på siste ledd, uten egen JS-tung logikk.
Nettleserstøtte: Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er.
Design-tokens: var(--color-surface-text, ...), var(--color-surface-muted, ...), var(--font-size-small, ...), var(--font-weight-bold, ...), var(--space-2xs, ...)
Sist endret: 20. september 2026
Brukt: 9 steder

Formål

Viser brukerens plassering i et sidehierarki som en rekke lenker fra rot til gjeldende side, f.eks. "Turer / Roma 2025 / Dag 3". Implementerer ARIA APG sitt Breadcrumb-mønster: en <nav aria-label="Brødsmulesti"> med lenker, der siste ledd markeres aria-current="page" i stedet for å være en klikkbar selvreferanse.

Egner seg for

Sider som ligger flere nivåer ned i et navigerbart hierarki, der brukeren har nytte av å hoppe raskt tilbake til et foreldrenivå.

Egner seg ikke for

Flate nettsteder uten reelt hierarki - en brødsmulesti med bare ett eller to ledd gir liten verdi.
Fane-/steg-navigasjon innad på én side - bruk <lm-tabs> eller <lm-multistep-form> i stedet.

Bruk

<script type="module" src="/designsystem/komponenter/navigasjon/breadcrumb/breadcrumb.js"></script>

<lm-breadcrumb>
    <a href="/turer/">Turer</a>
    <a href="/turer/roma-2025/">Roma 2025</a>
    <a href="/turer/roma-2025/dag-3/">Dag 3</a>
</lm-breadcrumb>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Slots

Slot	Beskrivelse
(standard)	Vanlige `<a href="...">`-elementer, i rekkefølge fra rot til gjeldende side.

Parts

Part	Beskrivelse
`nav`	Wrapperen med `role="navigation"`/`aria-label="Brødsmulesti"` (satt implisitt via `<nav>`).

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-breadcrumb::part(nav) {
    /* egne stiler for "Wrapperen med `role="navigation"`/`aria-label="Brødsmulesti"` (satt implisitt via `<nav>`)." */
}

Tilgjengelighet

Hele stien pakkes i <nav aria-label="Brødsmulesti">, slik at skjermlesere kan hoppe direkte til den som et eget landemerke. Siste lenke får aria-current="page" automatisk (med mindre forbrukeren allerede har satt en egen verdi) og styles uten understreking/pekerhendelser siden den representerer gjeldende side.

<nav aria-label="Brødsmulesti"> gir et eget navigerbart landemerke for skjermlesere.
Siste lenke får aria-current="page" automatisk - dette gjør at skjermlesere annonserer den som gjeldende side, ikke som en vanlig navigerbar lenke.
Separatorene ("/") er rent visuelle (CSS content), og leses derfor ikke opp av skjermlesere som en del av lenketeksten.

Detaljer

Komponenten endrer aldri lenkenes href - siste ledd beholder sin href selv om den visuelt/semantisk representerer gjeldende side, slik at den fortsatt fungerer som en direktelenke hvis den kopieres eller åpnes i ny fane.

Referanser

Se også:

../nav-tabs/index.html - brukes for hoved-/toppnavigasjon, ikke for hierarkisk stiangivelse.

Brukes av:

okonomi/forbruk/transaksjoner/index.html
okonomi/forbruk/budsjett/index.html
okonomi/forbruk/faste-utgifter/index.html
okonomi/forbruk/importer/index.html
okonomi/forbruk/kvitteringer/index.html
okonomi/formue/aktiva/index.html
okonomi/formue/gjeld/index.html
okonomi/lonn/historikk/index.html
okonomi/lonn/forhandlinger/index.html

Avhengigheter: Ingen