Breadcrumbs

Stien fra forsiden til der brukeren står nå. Klassen settes på en <ol> inne i en <nav>: rekkefølgen betyr noe, så listen må være nummerert selv om tallene ikke vises.

Slik tar du den i bruk

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/breadcrumbs/breadcrumbs.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<nav aria-label="Du er her">
<ol class="fs-breadcrumbs">
  <li><a href="#">Forsiden</a></li>
  <li><a href="#">Mine saker</a></li>
  <li><a href="#" aria-current="page">Søknad 2026-0481</a></li>
</ol>
</nav>

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/breadcrumbs.css"

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<nav aria-label="Du er her">
  <ol {...fs.breadcrumbs()}>
    <li><a href="/">Forsiden</a></li>
    <li aria-current="page">Bostøtte</li>
  </ol>
</nav>

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

import { fs } from "@fristil/designsystem"

const sti = document.querySelector<HTMLOListElement>("#brodsmuler")

fs.setAttributes(sti, fs.breadcrumbs())

Tre ting må stå i markupen:

Hva	Hvorfor
`<nav aria-label="Du er her">`	Skjermlesere lister opp navigasjonene på siden. Uten teksten heter denne bare «navigasjon».
`<ol>`, ikke `<ul>`	Rekkefølgen er en del av betydningen
`aria-current="page"` på siste steg	Sier hvilken side brukeren er på. Fargen alene sier ingenting.

Skilletegnet legges inn med CSS. Sto skråstreken i markupen, ville skjermlesere lest «skråstrek» mellom hvert steg.

Klasser du kan style

Klasse	Hva det er
`.fs-breadcrumbs`	Listen med stegene

Variabel	Standard
`--fs-breadcrumbs-gap`	`var(--fs-spacing-2)`

Skilletegnet kommer fra ::before på hvert steg etter det første, og kan byttes:

.fs-breadcrumbs li + li::before {
  content: "›";
}

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

Siste steg skal være der brukeren er nå, ikke et sted å gå. Enten som en lenke med aria-current="page", eller som ren tekst.
Ikke kort ned stegene til «…» på liten skjerm uten at de kan foldes ut. Da mister brukeren nettopp den oversikten stien er til for.
Stien erstatter ikke en tilbakeknapp. Den viser hvor i strukturen brukeren er, ikke hvor hen kom fra.