Breadcrumbs

Om komponenten

Breadcrumbs/brødsmulesti er et navigasjonselement, som viser brukerens plassering og lar dem raskt navigere tilbake til tidligere nivåer i en applikasjon eller på et nettsted. Den gir brukerkontekst uten å ta opp mye plass.

Egnet til:

Produkter og brukergrensesnitt med mye hierarkisk innhold

Uegnet til:

Primærnavigasjon, som menyen
Navigasjon med kun ett nivå. Da bør du bruke BackLink
På små skjermer skal alltid BackLink brukes, da Breadcrumbs tar for stor plass på mobil

Relaterte komponenter

Backlink

Varianter

<Breadcrumbs>
  <Breadcrumb href="#">Min side</Breadcrumb>
  <Breadcrumb href="#">Instillinger</Breadcrumb>
  <Breadcrumb href="#">Kontaktinformasjon</Breadcrumb>
</Breadcrumbs>

Retningslinjer

Plassering

Breadcrumb plasseres øverst til venstre på siden. Den ligger under overskriften og navigasjonen, og over sidetittelen.

Innhold

Hver lenke (sidetittel) bør være kort, tydelig og gjenspeile plasseringen eller siden den lenker til.

På mobil skal backlink brukes

(Legg til bilde)

Formatering

Anatomi

Sidekobling Leder brukere til siden på "Parent level"
Skilletegn Skiller tydelig mellom hver side
Nåværende side Viser brukeren hvilken underside de er på

Universell utforming

Husk på

Brødsmulestien må alltid være tilgjengelig med skjermleser og tastaturnavigering.
Alle sidene i brødsmulestien skal være interaktive (unntatt den gjeldende siden) og lenke til sine respektive sider.
Lenketeksten skal være tydelig og formidler målet for lenken.
Det er brukt Backlink på mobile flater (Da breadcrumbs tar for mye plass).

Sjekkliste

✓ Vi har sjekket at når løsningen er på mobile flater så blir breadcrumbs om til backlink.

✓ Vi har testet at brødsmulestien er tilgjengelig med skjermleser og tastaturnavigering.

✓ Vi har testet at lenketeksten tydelig formidler målet for lenken.

Les mer

uu tilsynet lenker

Interaksjon

Alle sidene i Breadcrumbs-komponenten skal være interaktive – unntatt nåværende side.

Skilletegnene mellom sidelenker er ikke interaktive.

Tastatur

Key	Interaksjon
Tab	Kunne fokusere komponenten og navigere mellom lenkene
Enter	Kunne trykke på lenken

Props

Prop	Description	Default
`className?`	Additional CSS className for the element.	-
`children?`	The children of the component. A function may be provided to alter the children based on component state.	-
`style?`	Additional style properties for the element.	-
`href?`	The URL to navigate to when clicking the breadcrumb.	-
`id?`	A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed.	-
`ref?`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}	-
`key?`		-

Breadcrumbs

Prop	Description	Default
`className?`	Additional CSS className for the element.	-
`style?`	Additional style properties for the element.	-
`children?`	The contents of the collection.	-
`isDisabled?`	Whether the breadcrumbs are disabled.	-
`id?`	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).	-
`aria-label?`	Defines a string value that labels the current element.	-
`aria-labelledby?`	Identifies the element (or elements) that labels the current element.	-
`aria-describedby?`	Identifies the element (or elements) that describes the object.	-
`aria-details?`	Identifies the element (or elements) that provide a detailed, extended description for the object.	-
`slot?`	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.	-
`items?`	Item objects in the collection.	-
`dependencies?`	Values that should invalidate the item cache when using dynamic collections.	-
`onAction?`	Handler that is called when a breadcrumb is clicked.	-
`ref?`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}	-
`key?`		-