Breadcrumbs

Breadcrumbs hjelper brukeren med en sti av tidligere lenker.

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Eksempler

Enkel breadcrumbs

<Breadcrumbs>
  <BreadcrumbItem href="/">
    Hjem
  </BreadcrumbItem>
  <BreadcrumbItem href="/komponenter/oversikt">
    Komponenter
  </BreadcrumbItem>
  <BreadcrumbItem isCurrent href="/komponenter/breadcrumbs/">
    Breadcrumbs
  </BreadcrumbItem>
</Breadcrumbs>

Andre lenketyper

Bruk as for å bruke andre lenketyper, som Link. Standardverdien er "a".

<Breadcrumbs>
  <BreadcrumbItem as={Link} href="/">
    Hjem
  </BreadcrumbItem>
  <BreadcrumbItem as={Link} href="/komponenter/oversikt">
    Komponenter
  </BreadcrumbItem>
  <BreadcrumbItem as={Link} isCurrent href="/komponenter/breadcrumbs/" >
    Breadcrumbs
  </BreadcrumbItem>
</Breadcrumbs>

Med ikoner

Bruk icon for å legge til ikon ved siden av teksten.

<Breadcrumbs>
  <BreadcrumbItem href="/" icon={EnergyIcon}>
    Hjem
  </BreadcrumbItem>
  <BreadcrumbItem href="/komponenter/oversikt" icon={EnergyIcon}>
    Komponenter
  </BreadcrumbItem>
  <BreadcrumbItem isCurrent href="/komponenter/breadcrumbs/" icon={EnergyIcon}>
    Breadcrumbs
  </BreadcrumbItem>
</Breadcrumbs>

Ekspanderbar breadcrumbs

Bruk expandAriaLabel, maxItems og onExpand for å håndtere lange breadcrumbs.

function ExpandableBreadcrumbs() {
  const [maxItems, setMaxItems] = React.useState(4);

  function handleExpand() {
    setMaxItems(999);
  }

  return (
    <Breadcrumbs expandAriaLabel="vis alle breadcrumbs" maxItems={maxItems} onExpand={handleExpand}>
      <BreadcrumbItem href="/">Hjem</BreadcrumbItem>
      <BreadcrumbItem href="#">Underside1</BreadcrumbItem>
      <BreadcrumbItem href="#">Underside2</BreadcrumbItem>
      <BreadcrumbItem href="#">Underside3</BreadcrumbItem>
      <BreadcrumbItem href="#">Underside4</BreadcrumbItem>
      <BreadcrumbItem href="#">Underside5</BreadcrumbItem>
      <BreadcrumbItem href="#" isCurrent>
        Underside
      </BreadcrumbItem>
    </Breadcrumbs>
  );
}

Retningslinjer

Om du forventer lange breadcrumbs, benytt maxItems. Du må da også sette åpne-funksjon med prop onExpand og tekst for skjermlesere med prop expandAriaLabel.

Kode

<Breadcrumbs />

import { Breadcrumbs } from "@aneo-org/design-react/serverComponents";

Breadcrumbs.

Prop	Type	Beskrivelse
children	`ReactNode[] \| ReactNode;`	Legg inn BreadcrumbItem.
expandAriaLabel?	`string`	Tekst for skjermleser ved ekspandering.
icon?	`ComponentType \| boolean`	Overstyr variant-ikoner.
maxItems?	`number`	Antall breadcrumbitems du ønsker å vise.
onExpand?	`() => void`	Callback for ekspander-knappen.

<BreadcrumbItem />

import { BreadcrumbItem } from "@aneo-org/design-react/serverComponents";

BreadcrumbItem.

Prop	Type	Beskrivelse
as?	`ElementType`	Elementtypen du ønsker item skal rendre som, for eksempel {Link}. "a" er default.
children?	`ReactNode`	Innhold i lenke.
icon?	`ComponentType`	Legg til ikon til venstre for teksten.
title	`string`	Tittel-tekst. Implementert med Typography-komponenten, variant5.