Esikatselu
<div style={{ maxWidth: "22rem" }}>
<Nav>
<NavList>
<NavListItem>
<NavLink href="#">Lorem ipsum</NavLink>
</NavListItem>
<NavListItem>
<NavLink active href="#">
Dolor sit amet
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Consectetur</NavLink>
</NavListItem>
</NavList>
</Nav>
</div>
Käyttötarkoitus
Nav-komponenttia käytetään navigaatiorakenteiden toteuttamiseen. Navigaatiorakenteet mahdollistavat sisältösivujen eri alakategorioiden välillä navigoinnin.
Saavutettavuus
NavLink-komponentin active-prop asettaa aina automaattisesti aria-current="page"-attribuutin ruudunlukijoille.
Jos sivulla on useita navigaatioelementtejä (HTML:n nav-elementti), navigaatio on hyvä erottaa muista navigaatioelementeistä
aria-label-attribuutilla.
NavLinkToggle-komponentilla voi toteuttaa avautuvia navigaatiorakenteita. NavLinkToggle-komponenttia käytettäessä tulee välttää NavLink-komponentin iconAfter-propin käyttöä.
Esimerkit
Navigaatio linkeillä
<div style={{ maxWidth: "22rem" }}>
<Nav>
<NavLink iconBefore={<IconUiCaretLeft />} linkColor href="#" className="kds-mb-4">
Etusivu
</NavLink>
<NavHeading>
<NavLink href="#" active>
Henkilöasiakkaat
</NavLink>
</NavHeading>
<NavList>
<NavListItem>
<NavLink href="#" iconAfter={<IconUiCaretRight />}>
Asumisen tuet
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconAfter={<IconUiCaretRight />}>
Asevelvolliset
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconAfter={<IconUiCaretRight />}>
Eläkeläiset
</NavLink>
</NavListItem>
</NavList>
</Nav>
</div>
Navigaatio avausmahdollisuudella
function ToggleNavExample() {
const { isToggleOn, flipToggle } = useToggle({
multiple: true,
initialOpenIDs: ["lapsen-syntyma-ja-hoito", "aitiyspakkaus-tai-rahasumma", "aitiyspakkaus"],
});
return (
<div style={{ maxWidth: "22rem" }}>
<Nav>
<NavLink iconBefore={<IconUiCaretLeft />} linkColor href="#" className="kds-mb-4">
Etusivu
</NavLink>
<NavHeading>
<NavLink href="#">Henkilöasiakkaat</NavLink>
</NavHeading>
<NavList>
<NavListItem>
<NavLink href="#">Asumisen tuet</NavLink>
</NavListItem>
<NavListItem>
<NavLink
href="#"
toggle={
<NavLinkToggle
aria-controls="asumisen-tuet"
aria-expanded={isToggleOn("asumisen-tuet") ? "true" : "false"}
aria-label={isToggleOn("asumisen-tuet") ? "Sulje valikko" : "Avaa valikko"}
isOpen={isToggleOn("asumisen-tuet")}
onClick={() => flipToggle("asumisen-tuet")}
/>
}
>
Asevelvolliset
</NavLink>
{isToggleOn("asumisen-tuet") && (
<NavList id="asumisen-tuet">
<NavListItem>
<NavLink href="#">Pikaopas</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Sotilasavustus</NavLink>
</NavListItem>
</NavList>
)}
</NavListItem>
<NavListItem>
<NavLink
href="#"
toggle={
<NavLinkToggle
aria-controls="elakelaiset"
aria-expanded={isToggleOn("elakelaiset") ? "true" : "false"}
aria-label={isToggleOn("elakelaiset") ? "Sulje valikko" : "Avaa valikko"}
isOpen={isToggleOn("elakelaiset")}
onClick={() => flipToggle("elakelaiset")}
/>
}
>
Eläkeläiset
</NavLink>
{isToggleOn("elakelaiset") && (
<NavList id="elakelaiset">
<NavListItem>
<NavLink href="#">Pikaopas</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Kansaneläkettä vai työeläkettä?</NavLink>
</NavListItem>
</NavList>
)}
</NavListItem>
<NavListItem>
<NavLink
highlight
href="#"
toggle={
<NavLinkToggle
aria-controls="lapsen-syntyma-ja-hoito"
aria-expanded={isToggleOn("lapsen-syntyma-ja-hoito") ? "true" : "false"}
aria-label={isToggleOn("lapsen-syntyma-ja-hoito") ? "Sulje valikko" : "Avaa valikko"}
isOpen={isToggleOn("lapsen-syntyma-ja-hoito")}
onClick={() => flipToggle("lapsen-syntyma-ja-hoito")}
/>
}
>
Lapsen syntymä ja hoito
</NavLink>
{isToggleOn("lapsen-syntyma-ja-hoito") && (
<NavList id="lapsen-syntyma-ja-hoito">
<NavListItem>
<NavLink
href="#"
highlight
toggle={
<NavLinkToggle
aria-controls="aitiyspakkaus-tai-rahasumma"
aria-expanded={isToggleOn("aitiyspakkaus-tai-rahasumma") ? "true" : "false"}
aria-label={isToggleOn("aitiyspakkaus-tai-rahasumma") ? "Sulje valikko" : "Avaa valikko"}
isOpen={isToggleOn("aitiyspakkaus-tai-rahasumma")}
onClick={() => flipToggle("aitiyspakkaus-tai-rahasumma")}
/>
}
>
Äitiyspakkaus tai rahasumma
</NavLink>
{isToggleOn("aitiyspakkaus-tai-rahasumma") && (
<NavList id="aitiyspakkaus-tai-rahasumma">
<NavListItem>
<NavLink
href="#"
highlight
toggle={
<NavLinkToggle
aria-controls="aitiyspakkaus"
aria-expanded={isToggleOn("aitiyspakkaus") ? "true" : "false"}
aria-label={isToggleOn("aitiyspakkaus") ? "Sulje valikko" : "Avaa valikko"}
isOpen={isToggleOn("aitiyspakkaus")}
onClick={() => flipToggle("aitiyspakkaus")}
/>
}
>
Äitiyspakkaus
</NavLink>
{isToggleOn("aitiyspakkaus") && (
<NavList id="aitiyspakkaus">
<NavListItem>
<NavLink href="#">Äitiyspakkaus 2023</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Äitiyspakkaus 2024</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" active>
Äitiyspakkaus 2025
</NavLink>
</NavListItem>
</NavList>
)}
</NavListItem>
<NavListItem>
<NavLink href="#">Usein kysyttyä</NavLink>
</NavListItem>
</NavList>
)}
</NavListItem>
<NavListItem>
<NavLink href="#">Lapsilisä</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Yksityisen hoidon tuki</NavLink>
</NavListItem>
</NavList>
)}
</NavListItem>
</NavList>
</Nav>
</div>
);
}
Navigaatio erillisellä painikkeella
<div style={{ maxWidth: "22rem" }}>
<Nav>
<NavLink iconBefore={<IconUiCaretLeft />} linkColor href="#" className="kds-mb-4">
Etusivu
</NavLink>
<NavHeading>
<NavLink href="#">Henkilöasiakkaat</NavLink>
</NavHeading>
<NavList>
<NavListItem>
<NavLink
href="#"
toggle={
<NavLinkToggle aria-label="Avaa Asumisen tuet">
<IconUiCaretRight aria-hidden />
</NavLinkToggle>
}
>
Asumisen tuet
</NavLink>
</NavListItem>
<NavListItem>
<NavLink
href="#"
active
toggle={
<NavLinkToggle aria-label="Avaa Asevelvolliset">
<IconUiCaretRight aria-hidden />
</NavLinkToggle>
}
>
Asevelvolliset
</NavLink>
</NavListItem>
<NavListItem>
<NavLink
href="#"
toggle={
<NavLinkToggle aria-label="Avaa Eläkeläiset">
<IconUiCaretRight aria-hidden />
</NavLinkToggle>
}
>
Eläkeläiset
</NavLink>
</NavListItem>
</NavList>
</Nav>
</div>
Navigaatio Kirjaudu ulos -painikkeella
<div style={{ maxWidth: "22rem" }}>
<Nav>
<NavHeading>Otsikko</NavHeading>
<NavList>
<NavListItem>
<NavLink href="#">Omat etuudet</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Päivitä omia tietojasi</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Asioi toisen henkilön puolesta</NavLink>
</NavListItem>
<hr className="kds-my-2" />
<NavListItem>
<NavLink as="button" iconBefore={<IconUiDoorExit />} variant="danger">
Kirjaudu ulos
</NavLink>
</NavListItem>
</NavList>
</Nav>
</div>