Navigation Bar
10.0.13
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.
npm install @sj-ab/component-library.ui.navigation-barElevation
Resting (when content doesn’t scroll behind it)
Elevated (when content scrolls behind it)
Adaptive design
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å.
Importer av Navigation Bar
Repos med Navigation Bar
Senaste installerade version av Navigation Bar
Äldsta installerade version av Navigation Bar