Navigation Bar

Preferably used for primary and secondary navigation. Active items are highlighted by underlining using Audi Type Extended Normal.

Light Bar (Primary)

Dark Bar (Secondary)

Mobile Concept

On small viewports, the display changes to a dropdown / vertical list.

<nav class="navbar">
  <a href="#" class="navbar__link navbar__link--active">Active</a>
  <a href="#" class="navbar__link">Item</a>
</nav>