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"
    aria-describedby="language-selector-description"
    aria-expanded="false"
  >
    <button aria-haspopup="listbox" aria-current="true">Papiamentu</button>
    <ul 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>