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

HTML

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-spacing	var(--ds-size-2)
--dsc-breadcrumbs-icon-size	var(--ds-size-6)
--dsc-breadcrumbs-icon-url	url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E")
--dsc-breadcrumbs-color	var(--ds-color-text-subtle)
--dsc-breadcrumbs-label	"Du er her:"

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.

Sti eller tilbake-knapp basert på skjermbreidde

Om du legg både ein <a> og ein <ol> direkte i <ds-breadcrumbs>, vil tilbake-knappen visast på skjermar smalare enn 650px, og stien visast på breiare skjermar.

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)