Navigation Bar

• Storybook
• Figma
• Bit.cloud

Adaptive 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.

<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.

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å.

• Fix display issues for TicketCard: Add null checks and correct color variant exclusion

  7.0.25