Esikatselu
<Breadcrumb aria-label="Murupolku">
<BreadcrumbItem href="#">Lorem ipsum</BreadcrumbItem>
<BreadcrumbItem href="#">Dolor</BreadcrumbItem>
<BreadcrumbItem active>Sit amet</BreadcrumbItem>
</Breadcrumb>
Käyttötarkoitus
Murupolut koostuvat luettelosta linkkejä, jotka auttavat käyttäjää visualisoimaan sivun sijainnin verkkosivuston hierarkkisessa rakenteessa ja mahdollistavat navigoinnin ylätason sivuille.
- Käytä kun halutaan näyttää polku tällä hetkellä avoinna olevalle sivulle.
- Käytä kun halutaan antaa helppo tapa siirtyä takaisin ylätason sivuille.
- Käytä syvissä navigointirakenteissa.
- Älä korvaa otsikkoelementtejä murupolulla.
Saavutettavuus
BreadcrumbItem
-komponentin active
-prop asettaa aina automaattisesti aria-current="page"
-attribuutin ruudunlukijoiden käyttäjille.
Jos sivulla on useita navigaatioelementtejä (HTML:n nav-elementti), navigaatio on hyvä erottaa muista navigaatioelementeistä aria-label
-attribuutilla.
BreadcrumbItemin as
-prop mahdollistaa halutun linkkikomponentin (esim. Router-kirjaston linkki) käytön. Muropolkulinkit rendataan kuitenkin aina li-elementin sisään.
Esimerkit
<Breadcrumb aria-label="Murupolku">
<BreadcrumbItem href="#">Etusivu</BreadcrumbItem>
<BreadcrumbItem href="#">Henkilöasiakkaat</BreadcrumbItem>
<BreadcrumbItem active>Opiskelijat</BreadcrumbItem>
</Breadcrumb>
Skeleton
<Breadcrumb aria-label="Ladataan murupolkua">
<BreadcrumbItem disabled>
<Skeleton variant="text" className="kds-w-20" />
</BreadcrumbItem>
<BreadcrumbItem disabled>
<Skeleton variant="text" className="kds-w-20" />
</BreadcrumbItem>
<BreadcrumbItem active disabled>
<Skeleton variant="text" className="kds-w-20" />
</BreadcrumbItem>
</Breadcrumb>