Language Switcher - Closed — JCrafts Design System

HTML Code (Demo)

<div class="mod-languages lang-switcher">
  <p class="visually-hidden" id="lang-des-2">Sprache auswählen</p>
  <details class="mod-languages__details">
    <summary class="mod-languages__trigger" title="Deutsch (Deutschland)" aria-describedby="lang-des-2">DE</summary>
    <ul class="mod-languages__list" role="listbox" aria-labelledby="lang-des-2">
      <li class="mod-languages__item mod-languages__item--active" role="option" aria-selected="true">
        <a href="#" aria-current="true">Deutsch (Deutschland)</a>
      </li>
      <li class="mod-languages__item" role="option" aria-selected="false">
        <a href="#">English (United Kingdom)</a>
      </li>
    </ul>
  </details>
</div>

Configuration

Component Config: Navigation/lang-switcher/lang-switcher.config.js

{
  "moduleId": "2",
  "activeCode": "DE",
  "activeTitle": "Deutsch (Deutschland)",
  "open": false,
  "languages": [
    {
      "name": "Deutsch (Deutschland)",
      "link": "#",
      "active": true
    },
    {
      "name": "English (United Kingdom)",
      "link": "#",
      "active": false
    }
  ]
}