Header met meerdere menus visueel voorbeeld

Benodigde stappen:

1. Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden.

Voorbeelden:

Voor het visuele voorbeeld zie de header van deze pagina.

HTML-voorbeeld:

<header>
  <div>
      <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>

      <nav
      data-open-label="Menu"
      data-close-label="Sluit menu"
      data-media="(min-width: 30rem)"
      aria-label="Hoofdnavigatie"
      class="collapsible">
        <div class="collapsing-element">
            <ul>
              <li><a href="/">Home</a></li>
              <li><a href="/components">Componenten</a></li>
              <li><a href="/documentation">Documentatie</a></li>
            </ul>

            <ul>
              <li><a href="#">Logout</a></li>
            </ul>
        </div>
      </nav>
  </div>
</header>