Ga direct naar inhoud

Header met navigatie met meerdere menus en form button

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 class="actions">
              <li><a href="./example-form-button" class="avatar">A</a></li>
              <li>
                <form action="http://localhost/logout" method="POST" class="inline">
                  <input type="hidden" name="_token" value="">
                  <button type="submit">Logout</button>
                </form>
              </li>
            </ul>
        </div>
      </nav>
  </div>
</header>