Esikatselu
const SimpleNav = () => {
return (
<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>
);
};
render(<SimpleNav />);
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={<IconCaretLeft />} linkColor href="#" className="kds-mb-4">
Etusivu
</NavLink>
<NavHeading>
<NavLink href="#" active>
Henkilöasiakkaat
</NavLink>
</NavHeading>
<NavList>
<NavListItem>
<NavLink href="#" iconAfter={<IconCaretRight />}>
Asumisen tuet
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconAfter={<IconCaretRight />}>
Asevelvolliset
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconAfter={<IconCaretRight />}>
Eläkeläiset
</NavLink>
</NavListItem>
</NavList>
</Nav>
</div>
Navigaatio avausmahdollisuudella
const ToggleNav = () => {
const [isOpen, setIsOpen] = useState(true);
const [isOpen2, setIsOpen2] = useState(false);
return (
<div style={{ maxWidth: "22rem" }}>
<Nav>
<NavLink iconBefore={<IconCaretLeft />} 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="#"
highlight
toggle={
<NavLinkToggle
aria-controls="asevelvolliset-sub-pages"
aria-expanded={isOpen ? "true" : "false"}
aria-label={isOpen ? "Sulje valikko" : "Avaa valikko"}
isOpen={isOpen}
onClick={() => setIsOpen(!isOpen)}
/>
}
>
Asevelvolliset
</NavLink>
{isOpen && (
<NavList id="asevelvolliset-sub-pages">
<NavListItem>
<NavLink href="#" active>
Pikaopas
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Sotilasavustus</NavLink>
</NavListItem>
</NavList>
)}
</NavListItem>
<NavListItem>
<NavLink
href="#"
toggle={
<NavLinkToggle
aria-controls="elakelaiset-sub-pages"
aria-expanded={isOpen2 ? "true" : "false"}
aria-label={isOpen ? "Sulje valikko" : "Avaa valikko"}
isOpen={isOpen2}
onClick={() => setIsOpen2(!isOpen2)}
/>
}
>
Eläkeläiset
</NavLink>
{isOpen2 && (
<NavList id="elakelaiset-sub-pages">
<NavListItem>
<NavLink href="#">Pikaopas</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Kansaneläkettä vai työeläkettä?</NavLink>
</NavListItem>
</NavList>
)}
</NavListItem>
</NavList>
</Nav>
</div>
);
};
render(<ToggleNav />);
Navigaatio erillisellä painikkeella
<div style={{ maxWidth: "22rem" }}>
<Nav>
<NavLink iconBefore={<IconCaretLeft />} 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">
<IconCaretRight aria-hidden />
</NavLinkToggle>
}
>
Asumisen tuet
</NavLink>
</NavListItem>
<NavListItem>
<NavLink
href="#"
active
toggle={
<NavLinkToggle aria-label="Avaa Asevelvolliset">
<IconCaretRight aria-hidden />
</NavLinkToggle>
}
>
Asevelvolliset
</NavLink>
</NavListItem>
<NavListItem>
<NavLink
href="#"
toggle={
<NavLinkToggle aria-label="Avaa Eläkeläiset">
<IconCaretRight aria-hidden />
</NavLinkToggle>
}
>
Eläkeläiset
</NavLink>
</NavListItem>
</NavList>
</Nav>
</div>