Breadcrumbs

Pokazuje, gdzie leży strona, i linkuje do każdego poziomu nad nią. Przy ustawionym moreLabel długie ścieżki składają środkowe poziomy w menu.

Breadcrumbs

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: Breadcrumbs

Noc, podgląd: Breadcrumbs

Wysoki kontrast, podgląd: Breadcrumbs

UżycieLink do sekcji Użycie

tsx

import { Breadcrumbs } from '@skribly/ui/navigation'

tsx

<Breadcrumbs label="Breadcrumb" moreLabel="Show hidden levels" items={[
  { id: 'home', label: 'Home', href: '/' },
  { id: 'docs', label: 'Docs', href: '/docs' },
  { id: 'install', label: 'Install' }
]} />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Landmark nav z listą uporządkowaną; ostatnia pozycja jest bieżącą stroną z aria-current="page".
Przycisk składania otwiera menu ukrytych poziomów, obsługiwane klawiszami strzałek i zamykane klawiszem Escape.
Separatory są ukryte przed czytnikami ekranu.
Pozycje zawijają się na wąskich ekranach, a długie etykiety są ucinane z zachowaniem pełnej nazwy.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.