Breadcrumb — Kilden

Beta

Breadcrumb viser brukerens posisjon i et navigasjonshierarki med klikkbare lenker tilbake til overordnede sider. Rendres som en semantisk <nav> med ordnet liste. Separatorer settes inn automatisk.

Importering

import {
  Breadcrumb,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbEllipsis,
} from "@kilden/designsystem";

Grunnleggende bruk

<Breadcrumb>
<BreadcrumbLink href="#">Hjem</BreadcrumbLink>
<BreadcrumbLink href="#">Komponenter</BreadcrumbLink>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</Breadcrumb>

Med ellipsis

For dype hierarkier kan du bruke BreadcrumbEllipsis for å skjule mellomliggende nivåer.

<Breadcrumb>
<BreadcrumbLink href="#">Hjem</BreadcrumbLink>
<BreadcrumbEllipsis />
<BreadcrumbLink href="#">Komponenter</BreadcrumbLink>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</Breadcrumb>

Med asChild

Bruk asChild for å rendre en annen komponent som lenke, for eksempel med React Router.

<Breadcrumb>
<BreadcrumbLink asChild>
  <a href="#">Hjem</a>
</BreadcrumbLink>
<BreadcrumbPage>Side</BreadcrumbPage>
</Breadcrumb>

Tilpasset separator

<Breadcrumb separator=">">
<BreadcrumbLink href="#">Hjem</BreadcrumbLink>
<BreadcrumbLink href="#">Komponenter</BreadcrumbLink>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</Breadcrumb>

Lang sti

<Breadcrumb>
<BreadcrumbLink href="#">Hjem</BreadcrumbLink>
<BreadcrumbLink href="#">Dokumentasjon</BreadcrumbLink>
<BreadcrumbLink href="#">Komponenter</BreadcrumbLink>
<BreadcrumbLink href="#">Navigasjon</BreadcrumbLink>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</Breadcrumb>

Bruksanbefalinger

Bruk for hierarkisk navigasjon

Breadcrumb viser tydelig hvor brukeren er i informasjonsarkitekturen og gir rask tilgang til overordnede sider.

Hjem / Kontakt / Hjelp (ingen hierarkisk relasjon)

Ikke bruk for flat navigasjon

Hvis sidene ikke har et hierarki, er breadcrumbs forvirrende. Bruk vanlige lenker eller tabs i stedet.

Tilgjengelighet

Rendres som <nav> med aria-label="Brødsmulesti"
Bruker ordnet liste (<ol>) for korrekt semantikk
Gjeldende side markeres med aria-current="page"
Separatorer settes inn automatisk og er skjult med aria-hidden="true"
Ellipsis har sr-only-tekst for skjermlesere

Props

Arver alle props fra <nav>. Setter automatisk aria-label="Brødsmulesti". Separatorer settes inn automatisk mellom children.

Prop	Type	Standard	Beskrivelse
`separator`	`React.ReactNode`	`"/"`	Separator mellom brødsmuler
`className`	`string`	—	CSS-klasser for den interne `<ol>`

BreadcrumbLink

Arver alle props fra <a>. Understreket som standard, fjerner understreking ved hover.

Prop	Type	Standard	Beskrivelse
`asChild`	`boolean`	`false`	Rendrer barn-elementet som lenke i stedet for en `<a>`.

BreadcrumbPage

Arver alle props fra <span>. Markert med aria-current="page" og aria-disabled="true".

BreadcrumbEllipsis

Arver alle props fra <span>. Viser … med sr-only-tekst "Flere sider".