Header met language selector list 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>

  <a href="/" class="logo">
      <img src="/img/logo-white.svg" alt="Placeholder logo">Manon
  </a>

  <div>
    <nav aria-label="Hoofdnavigatie">
      <div class="collapsing-menu">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/components">Componenten</a></li>
          <li><a href="/documentation">Documentatie</a></li>
        </ul>
      </div>
    </nav>

    <div class="language-selector">
      <p>Kies een taal:</p>
      <p class="visually-hidden" id="language-selector-description">Select your language</p>
      <div class="language-selector-options" aria-describedby="language-selector-description" aria-expanded="false">
        <button aria-haspopup="listbox">
          Papiamentu
        </button>
        <ul role="listbox">
            <li>
              <a hreflang="nl" href="." role="option" data-value="Nederlands" lang="nl">Nederlands</a>
            </li>
            <li>
              <a hreflang="en" href="." role="option" data-value="English" lang="en">English</a>
            </li>
            <li>
              <a hreflang="fy" href="." role="option" data-value="Frysk" lang="fy">Frysk</a>
            </li>
            <li aria-current="true">
              <a hreflang="pap-CW" href="." role="option" data-value="Papiamentu" lang="pap-CW">Papiamentu</a>
            </li>
            <li>
              <a hreflang="pap-AW" href="." role="option" data-value="Papiamento" lang="pap-AW">Papiamento</a>
            </li>
        </ul>
      </div>
    </div>

    <button class="round">LO</button>
  </div>
</header>

CSS-voorbeeld:

Ingestelde variabelen voor deze weergave

:root {
  /* Header */
  --header-padding-right: 1rem;
  --header-padding-left: 1rem;
  --header-min-height: 3rem;
  --header-flex-direction: row;
  --header-justify-content: space-between;
  --header-background-color: #1b1b39;
  --header-navigation-text-color: white;
  --header-navigation-position: initial;

  /* Navigation */
  --header-navigation-border-width: 0;
  --header-navigation-width: auto;

  /* Collapsible menu */
  --navigation-collapsible-menu-menu-order: 1;

  /* Link styling */
  --header-navigation-link-text-color: white;
  --header-navigation-link-hover-text-color: var(--header-navigation-link-text-color);
  --header-navigation-link-visited-text-color: var(--header-navigation-link-text-color);
  --header-navigation-link-visited-hover-text-color: var(--header-navigation-link-text-color);
  --header-navigation-link-active-text-color: var(--header-navigation-link-text-color);

  /* Language selector list */
  --language-selector-list-label-text-color: #fff;

  /* Menu toggle button */
  --navigation-collapsible-menu-button-background-color: transparent;
  --navigation-collapsible-menu-icon-color: var(--header-navigation-link-text-color);
  --navigation-collapsible-menu-button-min-width: 0;
  --navigation-collapsible-menu-button-width: auto;
}