• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Inställningar

Komponenter

Komponenter

​
​

Inga resultat hittade, prova med andra sökvillkor.

Navigation Drawer

Navigation Drawer

Navigation Drawers allow people to switch between different sections of an app on tablet and desktop. The hierarchy level and state is preserved as the user navigates between sections.

Demo
Installation
Länkar
Tillgänglighet
Change log
Statistik

Demo

Installation

Kodexempel
npm install @sj-ab/component-library.ui.navigation-drawer

Länkar

  • Storybook

  • Figma

  • Bit.cloud

Tillgänglighet

Semantik

Navigation Drawer presenteras som en dialogruta (role="dialog") där alla menyvalen ligger som länkar i en lista.

Tillgängligt namn

Dialogrutan bör få ett namn genom propen ariaLabel – t.ex. "Huvudnavigation". Detta gör det lättare för användare med hjälpmedel urskilja dialogens syfte.

Visning av aktivt val

Det aktiva valet i navigationen måste gå att urskilja från de övriga valen. Visuellt görs detta genom att textfärgen och typografin ändras.

För användare med skärmläsare kommuniceras det aktiva valet med WAI-ARIA attributet aria-current="page". Detta sker automatiskt på komponentnivå.

Change log

Statistik

Kodexempel
<div role="dialog" aria-label="Main navigation">
  <ul>
    <li>
      <a href="">Start</a>
    </li>
    <li>
      <a href="">Journeys</a>
    </li>
    <li>
      <a href="">Login</a>
    </li>
    <li>
      <a href="">Traffic info</a>
    </li>
    <li>
      <a href="">More</a>
    </li>
  </ul>
</div>