Navigation Bar

7.0.36

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

Demo

Installation

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

Länkar

Best practices

Adaptive design

Mobile, Tablet & Desktop

Mobile, Tablet & Desktop

Overflow menu

Mobile, Tablet & Desktop

Mobile, Tablet & Desktop

Elevation

Resting (default)

Resting (default)

Elevated (when content scrolls behind it)

Elevated (when content scrolls behind it)

Elevated Prominent (when content scrolls behind it)

Elevated Prominent (when content scrolls behind it)

Tillgänglighet

Semantik

Navigation Bar 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 Bar 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 placera Navigation Bar på korrekt 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 Bar

    2
  • Repos med Navigation Bar

    10%
  • Senaste installerade version av Navigation Bar

    7.0.36
  • Äldsta installerade version av Navigation Bar

    7.0.34