Language Switcher - English active — JCrafts Design System

HTML Code (Demo)

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

Configuration

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

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