Komponenter

Breadcrumbs

Breadcrumbs hjelper brukarane med å forstå kvar dei er i ei struktur, og gjer det mogleg å navigere tilbake til høgare nivå.

Oversikt Kode Tilgjengelighet

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const Preview = () => (
  <>
    <Breadcrumbs aria-label='Du er her:'>
      <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 3'>
        Nivå 3
      </Breadcrumbs.Link>
      <Breadcrumbs.List>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href='#'>Nivå 4</Breadcrumbs.Link>
        </Breadcrumbs.Item>
      </Breadcrumbs.List>
    </Breadcrumbs>
  </>
);

render(<Preview />)

Bruk

Klassenavnet ds-breadcrumbs blir brukt i <ds-breadcrumbs>. Web komponenten håndterer automatisk aria-current="page" på siste lenke i DOM-treet.

Dersom du ikke ønsker å bruke <ds-breadcrumbs>, kan du bruke <nav class="ds-breadcrumbs" aria-label="Du er her:"> og selv håndtere aria-current="page".

CSS variablar og data-attributt

Størrelsar styrast med data-size og fargar med data-color. Komponenten vil arve næraste forelder med desse satt.

CSS-variabler
Navn	Verdi
--dsc-breadcrumbs-color	var(--ds-color-text-subtle)
--dsc-breadcrumbs-icon-size	var(--ds-icon-size)
--dsc-breadcrumbs-icon-url	url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.47%205.97a.75.75%200%200%201%201.06%200l5.5%205.5a.75.75%200%200%201%200%201.06l-5.5%205.5a.75.75%200%201%201-1.06-1.06L14.44%2012%209.47%207.03a.75.75%200%200%201%200-1.06%22%2F%3E%3C%2Fsvg%3E")
--dsc-breadcrumbs-label	"Du er her:"
--dsc-breadcrumbs-spacing	var(--ds-size-2)

Ingen relevante data-attributter funnet.

Eksempel

Tilbake-knapp

Om du legg ein <a> direkte i <ds-breadcrumbs> som eneste barn, vil lenka visast som ein tilbake-knapp. Det er viktig at du er konsistent i løysinga di, og bruker anten tilbake-knapp eller sti, ikkje begge delar.

Berre sti

Om du kun legg <ol> direkte i <ds-breadcrumbs>, vil denne alltid visast som ein sti. Dette betyr at du får lik visning på både mobil og desktop.

Tilpass visninga etter skjermbreidda

Om du legg både ein <a> og ein <ol> direkte i <ds-breadcrumbs>, blir berre lenka til nærmaste overordna nivå vist på skjermar smalare enn 650 px. På breiare skjermar blir heile stien vist.

React

<Breadcrumbs aria-label="Du er her:">  <Breadcrumbs.Link aria-label="Tilbake til nivå 3">Nivå 3</Breadcrumbs.Link>  <Breadcrumbs.List>    <Breadcrumbs.Item>      <Breadcrumbs.Link href="https://designsystemet.no/">        Nivå 1      </Breadcrumbs.Link>    </Breadcrumbs.Item>    <Breadcrumbs.Item>      <Breadcrumbs.Link href="https://designsystemet.no/niva-2/">        Nivå 2      </Breadcrumbs.Link>    </Breadcrumbs.Item>  </Breadcrumbs.List></Breadcrumbs>;

Breadcrumbs

aria-label
Description: Sets the screen reader label for the Breadcrumbs area
Type: string
Default: 'Du er her'

Name	Type	Default	Description
aria-label	`string`	'Du er her'	Sets the screen reader label for the Breadcrumbs area

BreadcrumbsLink

children
Description: The content to display inside the link.
Type: ReactNode

asChild
Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
Type: boolean
Default: false

Name	Type	Default	Description
children	`ReactNode`	-	The content to display inside the link.
asChild	`boolean`	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

Rediger denne siden på github.com (åpnes i ny fane)