Navigation Bar
7.2.6
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-barAdaptive design
Mobile, Tablet & Desktop
Overflow menu
Mobile, Tablet & Desktop
Elevation
Resting (default)
Elevated (when content scrolls behind it)
Elevated Prominent (when content scrolls behind it)
Semantik
Navigation Bar presenteras som ett navigationslandmärke (<nav>) där alla menyvalen ligger som länkar i en lista.
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