Esikatselu
<Breadcrumb aria-label="Murupolku" isLegacy={false}>
<BreadcrumbList>
<BreadcrumbListItem>
<BreadcrumbLink href="#">Lorem ipsum</BreadcrumbLink>
</BreadcrumbListItem>
<BreadcrumbListItem>
<BreadcrumbLink href="#">Dolor</BreadcrumbLink>
</BreadcrumbListItem>
<BreadcrumbListItem isCurrentPage>
<BreadcrumbPage>Sit amet</BreadcrumbPage>
</BreadcrumbListItem>
</BreadcrumbList>
</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
BreadcrumbListItem-komponentin isCurrentPage-prop asettaa automaattisesti aria-current="page"-attribuutin, joka merkitsee nykyisen sivun ruudunlukijoiden käyttäjille.
Navigaatio on hyvä erottaa muista navigaatioelementeistä aria-label-attribuutilla, jos sivulla on useita navigaatioelementtejä (HTML:n nav-elementti).
Murupolun linkit renderöidään listan sisälle, jolloin murupolun linkkien lukumäärä kerrotaan ruudunlukijoille.
Murupolun rakenne
Murupolku koostuu seuraavista komponenteista:
Breadcrumb - Murupolun pääelementti (nav).BreadcrumbList - Lista, jonka sisään yksittäiset sivut tulevat (ol).BreadcrumbListItem - Yksittäinen listaelementti (li).BreadcrumbLink - Interaktiivinen linkkielementti (a).BreadcrumbPage - Aktiivinen sivu, joka ei ole interaktiivinen (span).
BreadcrumbLink-komponentin as-prop mahdollistaa Router-kirjaston
Esimerkit
Murupolun toteuttaminen
Normaali murupolku:
<Breadcrumb aria-label="Murupolku" isLegacy={false}>
<BreadcrumbList>
<BreadcrumbListItem>
<BreadcrumbLink href="#">Etusivu</BreadcrumbLink>
</BreadcrumbListItem>
<BreadcrumbListItem>
<BreadcrumbLink href="#">Henkilöasiakkaat</BreadcrumbLink>
</BreadcrumbListItem>
<BreadcrumbListItem isCurrentPage>
<BreadcrumbPage>Opiskelijat</BreadcrumbPage>
</BreadcrumbListItem>
</BreadcrumbList>
</Breadcrumb> Murupolku ikonilla:
<Breadcrumb aria-label="Murupolku" isLegacy={false}>
<BreadcrumbList>
<BreadcrumbListItem>
<BreadcrumbLink href="#">
<span>
<IconUiHome className="kds-mr-3 kds-mb-1" />
<span>Etusivu</span>
</span>
</BreadcrumbLink>
</BreadcrumbListItem>
<BreadcrumbListItem>
<BreadcrumbLink href="#">Henkilöasiakkaat</BreadcrumbLink>
</BreadcrumbListItem>
<BreadcrumbListItem isCurrentPage>
<BreadcrumbPage>Opiskelijat</BreadcrumbPage>
</BreadcrumbListItem>
</BreadcrumbList>
</Breadcrumb> Pitkä murupolku
Sivun nimi voidaan lyhentää silloin, kun sivuston rakenne on syvä tai sivujen nimet ovat erityisen pitkiä. Sivun koko nimi voidaan asettaa title-attribuuttiin.
Murupolku voidaan myös asettaa rivittymään sanojen sisältä (isInline), mikä tiivistää murupolkua erityisesti mobiilinäytöillä.
<Breadcrumb aria-label="Murupolku" isInline isLegacy={false}>
<BreadcrumbList>
<BreadcrumbListItem>
<BreadcrumbLink href="#">Kansalaiset</BreadcrumbLink>
</BreadcrumbListItem>
<BreadcrumbListItem>
<BreadcrumbLink href="#" title="Ohjeet ja asiointi">
...
</BreadcrumbLink>
</BreadcrumbListItem>
<BreadcrumbListItem>
<BreadcrumbLink href="#" title="Reseptit ja lääkkeet">
...
</BreadcrumbLink>
</BreadcrumbListItem>
<BreadcrumbListItem>
<BreadcrumbLink href="#">Reseptilääkkeiden ostaminen ulkomailta</BreadcrumbLink>
</BreadcrumbListItem>
<BreadcrumbListItem isCurrentPage>
<BreadcrumbPage>Muiden maiden informoinnit sähköisestä reseptistä</BreadcrumbPage>
</BreadcrumbListItem>
</BreadcrumbList>
</Breadcrumb> Lataustila (Skeleton)
Murupolku voidaan renderöidä ensin Skeleton
<Breadcrumb aria-label="Ladataan murupolkua" isLegacy={false}>
<BreadcrumbList>
<BreadcrumbListItem>
<Skeleton variant="text" className="kds-w-20" />
</BreadcrumbListItem>
<BreadcrumbListItem>
<Skeleton variant="text" className="kds-w-20" />
</BreadcrumbListItem>
<BreadcrumbListItem isCurrentPage>
<Skeleton variant="text" className="kds-w-20" />
</BreadcrumbListItem>
</BreadcrumbList>
</Breadcrumb> Esimerkki murupolun dynaamisesta toteuttamisesta
function BreadcrumbWrapper() {
const items = [
{ label: "Etusivu", href: "#etusivu" },
{ label: "Henkilöasiakkaat", href: "#henkiloasiakkaat" },
{ label: "Opiskelijat", href: "#opiskelijat" },
];
return (
<Breadcrumb isLegacy={false}>
<BreadcrumbList>
{items.map(({ label, href }, i) => {
const isCurrentPage = i === items.length - 1;
return (
<BreadcrumbListItem key={href} isCurrentPage={isCurrentPage}>
{isCurrentPage && <BreadcrumbPage>{label}</BreadcrumbPage>}
{!isCurrentPage && <BreadcrumbLink href={href}>{label}</BreadcrumbLink>}
</BreadcrumbListItem>
);
})}
</BreadcrumbList>
</Breadcrumb>
);
} Esimerkit käytöstä poistuvasta rakenteesta
Alla olevat esimerkit poistuvat käytöstä versiossa 19.0.0.
Siirry käyttämään BreadcrumbList -, BreadcrumbListItem -, BreadcrumbLink ja BreadcrumbPage -komponentteja.
<Breadcrumb aria-label="Murupolku">
<BreadcrumbItem href="#">Etusivu</BreadcrumbItem>
<BreadcrumbItem href="#">Henkilöasiakkaat</BreadcrumbItem>
<BreadcrumbItem active>Opiskelijat</BreadcrumbItem>
</Breadcrumb> <Breadcrumb aria-label="Murupolku" isInline>
<BreadcrumbItem href="#">Kansalaiset</BreadcrumbItem>
<BreadcrumbItem href="#" title="Ohjeet ja asiointi">
...
</BreadcrumbItem>
<BreadcrumbItem href="#" title="Reseptit ja lääkkeet">
...
</BreadcrumbItem>
<BreadcrumbItem href="#">Reseptilääkkeiden ostaminen ulkomailta</BreadcrumbItem>
<BreadcrumbItem active>Muiden maiden informoinnit sähköisestä reseptistä</BreadcrumbItem>
</Breadcrumb> <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>