Kilden

Breadcrumb

Kildekode på GitHub · Les som Markdown

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

Importering

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@kilden/designsystem";

Grunnleggende bruk

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

Med ellipsis

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

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

Lang sti

<Breadcrumb>
<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Hjem</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Dokumentasjon</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Komponenter</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Navigasjon</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>
</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 er skjult med aria-hidden="true"
  • Ellipsis har sr-only-tekst for skjermlesere

Props

Breadcrumb

Arver alle props fra <nav>. Setter automatisk aria-label="Brødsmulesti".

BreadcrumbList

Arver alle props fra <ol>. Flex-layout med gap.

BreadcrumbItem

Arver alle props fra <li>. Inline-flex container.

BreadcrumbLink

Arver alle props fra <a>. Hover-effekt med fargeendring.

BreadcrumbPage

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

BreadcrumbSeparator

Arver alle props fra <li>. Standard separator er chevron-ikon. Send inn children for tilpasset separator.