Header met een zoekveld 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>
  <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:42rem)"
    aria-label="Hoofdnavigatie"
    class="collapsible"
  >
    <div class="collapsing-element">
      <ul>
        <li><a href="../../index">Home</a></li>
        <li><a href="../components" aria-current="page">Componenten</a></li>
        <li><a href="../documentation">Documentatie</a></li>
      </ul>

      <div>
        <form class="inline">
          <input type="text" placeholder="Zoeken" />
          <button type="submit" class="icon-only icon-search">Zoeken</button>
        </form>
      </div>
    </div>
  </nav>
</header>