Taalselectie

Introductie

Een taalselectie is een dropdown-menu waarmee gebruikers uit een verticale lijst van talen kunnen kiezen door het menu uit te klappen.

Snelstart

    
      
    
    @use "@minvws/manon/components/language-selector";
  

Javascript importeren:

    
      
    
    import "@minvws/manon/js/language-selector.js";
  

Voorbeelden:

Voorbeeld: Basis

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