Breadcrumb
Murupolku sivuhierarkian ja käyttäjän sijainnin esitykseen.
Julkaistu versiossa 0.15.3
Esikatselu
Käyttötarkoitus
Murupolut koostuvat luettelosta linkkejä, jotka auttavat käyttäjää visualisoimaan sivun sijainnin verkkosivuston hierarkkisessa rakenteessa ja mahdollistavat navigoinnin ylätason sivuille.
Tee näin
- 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ä tee näin
- Ä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
Jos murupolku on pitkä tai polkutasoilla on pitkiä nimiä, voidaan käyttää komponentin sisältönä lyhennettä. Tällöin linkin koko nimi tulee asettaaa title-attribuuttiin.