Side navigation(Sivunavigaatio)
Sivunavigaatiota käytetään sisältösivujen välillä navigointiin erityisesti silloin kun sivut on ryhmitelty useaan eri alakategoriaan.
Saavutettavuus ja käytettävyys
- Komponentin otsikon ja navigaatioelementtien tekstisisältöjen tulee olla kuvaavia, ja ne on hyvä pyrkiä pitämään mahdollisimman lyhyinä.
- Ruudunlukijasaavutettavuuden varmistamiseksi tulee huolehtia, että yksittäisille navigaatioelementeille (linkit) asetetaan asianmukaiset aria-attribuutit: aria-current=page tällä hetkellä aktiiviselle sivulle, aria-current=location aktiivisen sivun yläsivulle, aria-label mikäli halutaan välittää linkin tekstisisällön ulkopuolista informaatiota ja aria-disabled mikäli linkki on estetty.
- Komponentille tulee antaa ylätason aria-label, joka kertoo ruudunlukijalle navigaation kontekstin ja tarkoituksen.
- Sivunavigaatiolle on lisäksi hyvä antaa HTML-id, jotta siihen voidaan liikkua suoraan esimerkiksi SkipLink-navigaatioelementeistä.
Mistä komponentti koostuu
Sivunavigaatio on navigaatioelementti, jonka sisällä on lista. Komponentin tekninen toteutus mahdollistaa sen, että lista voi sisältää tavanomaisten linkkien lisäksi esimerkiksi painikkeita tai muita semanttisia elementtejä. Kaikki listan elementit ovat kuitenkin semantiikasta huolimatta visuaaliselta tyyliltään samanlaisia. Varsinaisen linkkilistan lisäksi komponenttiin kuuluu sen otsikko sekä siihen liittyvä ikoni.
Sivunavigaatiossa linkit ovat hierarkisesti puurakenteessa. Komponentissa on mahdollista näyttää linkkejä kolmessa tasossa. Navigaatioelementin ollessa aktiivisena sen alasivut ovat näkyvissä.
Kapeille ruuduille suunnitellussa variantissaan komponentti sisältää painikkeen, josta varsinainen navigaatioelementti voidaan näyttää ja piilottaa.
Koko ja käyttö
Navigaatioelementtien sisällä on yllä olevan koodiesimerkin mukaisesti suunniteltu käytettävän RouterLink-komponenttia, joka voidaan semanttisesti renderöidä minä tahansa komponenttina kuten painikkeena tai jonkin kirjaston omana linkkikomponenttina. Tutustu komponentin tekniseen dokumentaatioon saadaksesi lisää esimerkkejä RouterLinkin käytöstä.
Palvelunavigaatio asemoidaan tavallisesti sivun vasempaan palstaan, sisältöalueen ollessa sen oikealla puolella. Se ottaa sivuttaissuunnassa kaiken se tilan, joka sille on tarjolla ja täten sen leveyttä kontrolloidaan ympäröivän elementin leveyttä säätämällä. Pienillä ruuduilla (mobiililaitteet) käytetään komponentista niille tarkoitettua varianttia ja asemoidaan komponentti sivun varsinaisen sisältöalueen yläpuolelle.
Pienen ruutukoon variantti
Mobiililaitteilla sivunavigaatio voidaan avata ja sulkea painiketta painamalla