Komponenter
Breadcrumbs
Breadcrumbs hjelper brukarane med å forstå kvar dei er i ei struktur, og gjer det mogleg å navigere tilbake til høgare nivå.
React
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
Den siste lenka i Breadcrumbs blir automatisk markert med aria-current="page".
Eksempel
Tilbake-knapp
Om du legg ein Breadcrumbs.Link direkte i Breadcrumbs, 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.
React
Unable to parse html
const BackOnly = () => ( <Breadcrumbs> <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 3'> Nivå 3 </Breadcrumbs.Link> </Breadcrumbs> ); render(<BackOnly />)
Berre sti
Om du kun legg Breadcrumbs.List direkte i Breadcrumbs, vil denne alltid visast som ein sti.
Dette betyr at du får lik visning på både mobil og desktop.
React
Unable to parse html
const ListOnly = () => ( <Breadcrumbs aria-label='Du er her:'> <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(<ListOnly />)
Sti eller tilbake-knapp basert på skjermbreidde
Om du legg både ein Breadcrumbs.Link og ein Breadcrumbs.List direkte i Breadcrumbs, vil tilbake-knappen visast på skjermar smalare enn 650px, og stien visast på breiare skjermar.
React
Unable to parse html
const MobileViewport = () => ( <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(<MobileViewport />)
HTML
Klassenavnet ds-breadcrumbs blir lagt på et <ds-breadcrumbs>.
Web komponenten håndterer automatisk aria-current="page" på siste lenke i lista.
Dersom du vil gjøre dette selv kan du bruke <nav class="ds-breadcrumbs" aria-label="Du er her:">.
Kun tilbake-knapp
Sti eller tilbake-knapp basert på skjermbreidde
CSS variablar og data-attributt
| 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.
Rediger denne siden på github.com (åpnes i ny fane)