Siirry sisältöön
Kela Design System KDS

14.5.0
Luonnos

TabNav

Komponentti linkkipohjaisen navigaation toteuttamiseen.

Julkaistu versiossa 13.6.0

Esikatselu

Käyttötarkoitus

TabNav-komponenttia käytetään sivuston linkkipohjaisen navigaation toteuttamiseen.

Tee näin
  • Käytä palvelun päänavigaation tai muun linkkipohjaisen navigaation toteuttamiseen.
  • Pidä linkkien nimet lyhyinä ja linkkien määrä pienenä.
  • Huomioi linkkien mahtuminen myös kapeille mobiilinäytöille.
Älä tee näin
  • Älä käytä sellaisten välilehtien toteuttamiseen, jotka ainoastaan vaihtavat sisältöä nykyisessä näkymässä. Tabs-komponentti soveltuu siihen paremmin.

Saavutettavuus

  • Jos sivulla on useita navigaatioelementtejä (nav tai role="navigation"), erota ne toisistaan aria-label-attribuutilla.
  • Aktiivinen sivu merkitään aria-current="page"-attribuutilla silloin, kun ollaan kyseisellä sivulla ja aria-current="location"-attribuutilla, kun ollaan kyseisen osion alasivulla.

Esimerkki

TabNav-komponentti ei itse hallitse navigaation leveyttä. Leveyden voi määrittää esimerkiksi Container-komponentilla yhteneväisesti muun sivupohjan asettelun kanssa.

TabNavListScrollable-komponenttia käytettäessä navigaatiota voi raahata hiirellä tai kosketuksella, mikäli se ei mahdu kokonaan ruudulle.

Tämän voi korvata TabNavList-komponentilla, jolloin elementit yritetään mahduttaa ruudulle, tarvittaessa tekstejä rivittämällä.

Alla esimerkki, jossa on annettu vihje ­-entiteetillä (soft hyphen), mistä kohtaa sanat tulisi tavuttaa.

Huomioitavaa selaintuessa