Navigation Rail

5.0.40

Navigation Rails 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

Props

Se fullständing dokumentation(öppnas i ny flik)
NamnTypBeskrivning

buttonAlignment

"bottom" | "top" | "center"Specifies the position of the navigation buttons in the navigation rail.

Installation

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

Länkar

Tillgänglighet

Semantik

Navigation Rail presenteras som ett navigationslandmärke (<nav>) där alla menyvalen ligger som länkar i en lista.

<nav aria-label="Huvudnavigation">
  <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>
</nav>

Tillgängligt namn

Navigationslandmärket 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 navigationen när det finns fler än ett nav-element på samma sida.

Läsordning

Navigation Rail ska alltid placeras i toppen av sidstrukturen inuti ett <header>-landmärke. Detta gör att tabbordningen och läsordningen för hjälpmedel blir naturlig och förutsägbar.

Utvecklare ansvarar för att Navigation Rail placeras på lämpligt ställe i appens struktur

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

  • Importer av Navigation Rail

    1

  • Repos med Navigation Rail

    5%

  • Senaste installerade version av Navigation Rail

    0.2.7

  • Äldsta installerade version av Navigation Rail

    0.2.7