Käyttötarkoitus
Komponenttia käytetään sivupalkissa sijaitsevan navigaation toteuttamiseen silloin kun käytetään sivupohjaa, jossa päänavigaationa on Sidebar.
Komponentti muuntuu myös mobiilinavigaatioksi.
Komponenttia ei kannata käyttää erillisen mobiilinavigaation toteuttamiseen muissa sivupohjissa.
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.
Sidebariin tulostettavia linkki- ja painikelistoja voi tarvittaessa erottaa visuaalisesti lisäämällä listojen väliin hr-tagin (ks. esimerkki alla). Mikäli ruudunlukijan ei haluta lukevan erotinviivaa tulee siihen lisätä aria-hidden-attribuutti.
Esimerkit
Rakenne ja tilat
const ExampleSidebar = () => {
const [isOpen, setIsOpen] = useState(true);
const [isOverlay, setIsOverlay] = useState(false);
const showAlert = (e) => {
if (e) e.preventDefault();
alert("onClick event");
};
const toggleOverlay = (event, value) => {
event.stopPropagation();
setIsOpen(value);
};
return (
<>
<Button appearance="outline" onClick={(e) => toggleOverlay(e, !isOpen)} className="kds-mb-6 kds-mr-2">
Näytä / piilota valikko
</Button>
<Button appearance="outline" onClick={() => setIsOverlay(!isOverlay)} className="kds-mb-6">
Overlay-tila: {isOverlay ? "päällä" : "pois päältä"}
</Button>
<div className="kds-overflow-hidden kds-h-screen kds-bg-background">
<Sidebar
logo={
<a href="#" aria-label="Etusivulle" className="kds-inline-block">
<LogoKela height="48" width="83" />
</a>
}
className="kds-relative kds-h-full" // Vain esimerkille
title="Sivun tai palvelun otsikko"
description="Sivun tai palvelun lyhyt kuvausteksti"
closeLabel="Sulje navigaatiovalikko"
aria-label="Päänavigaatio"
isOpen={isOpen}
isOverlay={isOverlay}
toggle={() => setIsOpen(!isOpen)}
>
<Nav>
<NavHeading>Painikkeet</NavHeading>
<NavLink as="button" linkColor iconBefore={<IconUiCaretLeft />} onClick={() => showAlert()}>
Takaisin
</NavLink>
<NavList>
<NavListItem>
<NavLink as="button">Painike</NavLink>
</NavListItem>
<NavListItem>
<NavLink as="button" onClick={(e) => showAlert(e)}>
Painike + onClick
</NavLink>
</NavListItem>
<NavListItem>
<NavLink as="button" active>
Painike - aktiivinen sivu
</NavLink>
</NavListItem>
<NavListItem>
<NavLink as="button" iconAfter={<IconUiCaretRight />}>
Painike kuvakkeella
</NavLink>
</NavListItem>
<NavListItem>
<NavLink as="button" disabled>
Painike, estetty
</NavLink>
</NavListItem>
<NavListItem>
<NavLink as="button" active disabled>
Painike, aktiivinen ja estetty
</NavLink>
</NavListItem>
</NavList>
<hr />
<NavHeading>Linkit</NavHeading>
<NavList>
<NavListItem>
<NavLink href="#">Linkki</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" onClick={(e) => showAlert(e)}>
Linkki + onClick
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" active>
Linkki, aktiivinen
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconAfter={<IconUiCaretRight />}>
Linkki kuvakkeella
</NavLink>
</NavListItem>
<NavListItem>
<NavLink disabled>Linkki, estetty</NavLink>
</NavListItem>
<NavListItem>
<NavLink active disabled>
Linkki, aktiivinen ja estetty
</NavLink>
</NavListItem>
</NavList>
</Nav>
</Sidebar>
</div>
</>
);
};
render(<ExampleSidebar />);
Esimerkki komponentin soveltamisesta OmaKelassa. Esimerkki ei vastaa täysin palvelun todellista navigaatiota.
const SimpleSidebar = () => {
const [isOpen, setIsOpen] = useState(true);
return (
<>
<Button onClick={() => setIsOpen(!isOpen)} className="kds-mb-6">
Näytä / piilota valikko
</Button>
<div className="kds-overflow-hidden kds-h-screen kds-bg-background">
<Sidebar
logo={
<a href="#" aria-label="Etusivulle" className="kds-inline-block">
<LogoOmaKela height="48" width="175" />
</a>
}
className="kds-relative kds-h-full" // Vain dokumentaation esimerkille
aria-label="Päänavigaatio"
isOpen={isOpen}
toggle={() => setIsOpen(!isOpen)}
>
<Nav>
<NavHeading>Katsele omia tietoja</NavHeading>
<NavList>
<NavListItem>
<NavLink href="#" active>
Etusivu
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Omat etuudet</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Omat asiakirjat</NavLink>
</NavListItem>
</NavList>
<NavHeading className="mt-4">Asioi verkossa</NavHeading>
<NavList>
<NavListItem>
<NavLink href="#">Tee hakemus</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Lähetä liite</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Ilmoita muutoksista</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Valita päätöksestä</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Asioi toisen henkilön puolesta</NavLink>
</NavListItem>
</NavList>
</Nav>
</Sidebar>
</div>
</>
);
};
render(<SimpleSidebar />);
Esimerkki komponentin soveltamisesta kela.fi:ssä. Esimerkki ei vastaa täysin palvelun todellista navigaatiota.
const ExampleSidebar = () => {
return (
<>
<div className="kds-overflow-hidden kds-h-screen kds-bg-background">
<Sidebar
logo={
<a href="#" aria-label="Etusivulle" className="kds-inline-block">
<LogoKela height="48" width="83" />
</a>
}
className="kds-relative kds-h-full" // Vain KDS-dokumentaation esimerkille
aria-label="Päänavigaatio"
isOpen={true}
toggle={() => false}
>
<Nav>
<NavLink as="button" linkColor iconBefore={<IconUiCaretLeft />} onClick={() => console.log("click")}>
Henkilöasiakkaat
</NavLink>
<NavLink href="#" className="kds-mt-2">
<NavHeading>Asumisen tuet</NavHeading>
</NavLink>
<NavList>
<NavListItem>
<NavLink href="#" iconAfter={<IconUiCaretRight />}>
Yleinen asumistuki
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconAfter={<IconUiCaretRight />}>
Mihin menoihin tukea voi saada?
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconAfter={<IconUiCaretRight />}>
Miten tulot vaikuttavat?
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Milloin asumistuki täytyy tarkistaa?</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Muut asumisen tuet</NavLink>
</NavListItem>
</NavList>
<hr />
<NavHeading className="kds-mt-8">Oikopolut</NavHeading>
<NavList>
<NavListItem>
<NavLink href="#" iconBefore={<IconDecoPersonsCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Asiakaspalvelu
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconBefore={<IconDecoInfoCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Hakemuksesta päätökseen
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconBefore={<IconDecoMathCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Laskurit
</NavLink>
</NavListItem>
</NavList>
</Nav>
</Sidebar>
</div>
</>
);
};
render(<ExampleSidebar />);
Esimerkki Sidebarin käytöstä Nav-komponenttien kanssa.
const ExampleSidebar = () => {
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
const [isToggleOpen, setIsToggleOpen] = useState(false);
const [isOverlay, setIsOverlay] = useState(false);
const toggleOverlay = (event, value) => {
event.stopPropagation();
setIsSidebarOpen(value);
};
return (
<>
<Button appearance="outline" onClick={(e) => toggleOverlay(e, !isSidebarOpen)} className="kds-mb-6 kds-mr-2">
Näytä / piilota valikko
</Button>
<Button appearance="outline" onClick={() => setIsOverlay(!isOverlay)} className="kds-mb-6">
Overlay-tila: {isOverlay ? "päällä" : "pois päältä"}
</Button>
<div className="kds-overflow-hidden kds-h-screen kds-bg-background">
<Sidebar
logo={
<a href="#" aria-label="Etusivulle" className="kds-inline-block">
<LogoKela height="48" width="83" />
</a>
}
className="kds-relative kds-h-full" // Vain KDS-dokumentaation esimerkille
aria-label="Päänavigaatio"
isOpen={isSidebarOpen}
isOverlay={isOverlay}
toggle={() => setIsSidebarOpen(!isSidebarOpen)}
>
<Nav>
<NavHeading className="kds-mt-2">
<NavLink href="#" active>
Asumisen tuet
</NavLink>
</NavHeading>
<NavList>
<NavListItem>
<NavLink
href="#"
toggle={
<NavLinkToggle
aria-controls="asevelvolliset-sub-pages"
aria-expanded={isToggleOpen ? "true" : "false"}
aria-label={isToggleOpen ? "Sulje valikko" : "Avaa valikko"}
isOpen={isToggleOpen}
onClick={() => setIsToggleOpen(!isToggleOpen)}
/>
}
>
Yleinen asumistuki
</NavLink>
{isToggleOpen && (
<NavList id="asevelvolliset-sub-pages">
<NavListItem>
<NavLink href="#">
Kuka voi saada
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">
Määrä ja maksaminen
</NavLink>
</NavListItem>
</NavList>
)}
</NavListItem>
<NavListItem>
<NavLink href="#">Mihin menoihin tukea voi saada?</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Miten tulot vaikuttavat</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Milloin asumistuki täytyy tarkistaa?</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Muut asumisen tuet</NavLink>
</NavListItem>
</NavList>
<hr />
<NavHeading className="kds-mt-8">
<NavLink>Oikopolut</NavLink>
</NavHeading>
<NavList>
<NavListItem>
<NavLink href="#" iconBefore={<IconDecoPersonsCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Asiakaspalvelu
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconBefore={<IconDecoInfoCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Hakemuksesta päätökseen
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconBefore={<IconDecoMathCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Kaskurit
</NavLink>
</NavListItem>
</NavList>
</Nav>
</SideBar>
</div>
</>
);
};
render(<ExampleSidebar />);