Skip to main contentSkip to site searchSkip to component search
Honeycomb

Language switcher

A language switcher component, typically used as a header widget.

The language switcher is a popup with a selection of languages or domains a user can choose from. It is usually found close to the site main navigation areas. The component is not tied to header styles.

Button location

The most common locations for the language switcher toggle button are the header widgets area and the header burger menu widgets area.

The toggle content may be the currently selected language, but for accessibility purposes it is good to add more text explaining what it does: "Open language selection".

You can do that with sr-only text or with aria-label on the button. Bear in mind that aria-label replaces any current label the button has, so make sure to also include the currently selected language in it.

Popup content

Close button:

  • The close button must be the first interactive element of the popup body;
  • The close button must have an accessible aria-label;

Domain items requirements:

  • Group the regions in separate section elements and connect them with their respective names using aria-labelledby;
  • Alphabetically sort the domain items by their transliterated names. E.g.:
    • Bosanski comes before Български (Bulgarski)
    • Ελληνικά (Ellinika) comes before English;
  • Each domain must be written in its own language and must contain a proper lang attribute, this enables screen readers to choose the correct speech;
  • Identify the country of a given language with the flag by using the alt attribute, this way users can identify different domains that have the same language. E.g:
    • English US with United States flag
    • English UK with United Kingdom flag
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <div class="flix-header-brand ">
      <a class="flix-header-brand__link" href="/">
        <img
          class="flix-header-brand__img"
          width="160"
          height="24"
          src="https://honeycomb-assets.hive.flixbus.com/honeycomb-logos-static/1.0.0/svg/flixtrain-white.svg"
          alt="FlixTrain logo"
        />
      </a>
    </div>
    <div class="flix-header-widgets">
      <button type="button" class="flix-btn flix-btn--link" data-popup="language-switcher-header-widget">
        <img
          class="flix-flag"
          src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg"
          alt="Deutsche Flagge"
          width="24"
          height="24"
        />
        Deutsch
      </button>
    </div>
    <div class="flix-header-burger-menu">
      <button
        type="button"
        aria-label="Open main site navigation"
        class="flix-header-burger-menu__toggle flix-btn flix-btn--link flix-btn--square flix-btn--md"
        aria-controls="menu-panel"
        aria-expanded="true"
      ></button>
      <div id="menu-panel" class="flix-header-burger-menu__panel">
        <button
          type="button"
          aria-label="Close main site navigation"
          class="flix-header-burger-menu__toggle flix-btn flix-btn--link flix-btn--square flix-btn--md"
          aria-controls="menu-panel"
          aria-expanded="true"
        ></button>
        <nav class="flix-header-burger-menu flix-header-burger-menu__nav" aria-label="Main">
          <ul class="flix-header-burger-menu__list">
            <li class="flix-header-burger-menu__item">
              <a class="flix-header-burger-menu__link" aria-current="page" href="/">
                <flix-icon name="home" solid aria-hidden="true"></flix-icon>
                <span class="flix-header-burger-menu__text">My bookings</span>
              </a>
            </li>
            <li class="flix-header-burger-menu__item">
              <button type="button" class="flix-header-burger-menu__link" data-dropdown="header-subnav"
                aria-controls="header-subnav" aria-expanded="false" aria-haspopup="menu">
                <flix-icon name="location" aria-hidden="true"></flix-icon>
                <span class="flix-header-burger-menu__text">Plan trip</span>
              </button>
              <ul id="header-subnav" class="flix-header-burger-menu-subnav" hidden="" role="menu">
                <li class="flix-header-burger-menu-subnav__item" role="presentation">
                  <a class="flix-header-burger-menu-subnav__link" aria-current="page" href="/" role="menuitem">
                    <flix-icon name="trip" solid aria-hidden="true"></flix-icon>
                    <span class="flix-header-burger-menu__text">Route Network</span>
                  </a>
                </li>
                <li class="flix-header-burger-menu-subnav__item" role="presentation">
                  <a class="flix-header-burger-menu-subnav__link" href="/" role="menuitem">
                    <flix-icon name="pin" aria-hidden="true"></flix-icon>
                    <span class="flix-header-burger-menu__text">Coach destination</span>
                  </a>
                </li>
                <li class="flix-header-burger-menu-subnav__item" role="presentation">
                  <a class="flix-header-burger-menu-subnav__link" href="/" role="menuitem">
                    <flix-icon name="night" aria-hidden="true"></flix-icon>
                    <span class="flix-header-burger-menu__text">Night buses</span>
                  </a>
                </li>
                <li class="flix-header-burger-menu-subnav__item" role="presentation">
                  <a class="flix-header-burger-menu-subnav__link" href="/" role="menuitem">
                    <span class="flix-header-burger-menu__text">More</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="flix-header-burger-menu__item">
              <a class="flix-header-burger-menu__link" href="/">
                <flix-icon name="real-time" aria-hidden="true"></flix-icon>
                <span class="flix-header-burger-menu__text">Real-time information</span>
              </a>
            </li>
            <li class="flix-header-burger-menu__item">
              <a class="flix-header-burger-menu__link" href="/">
                <span class="flix-header-burger-menu__text">About Us</span>
              </a>
            </li>
          </ul>
        </nav>
        <div class="flix-header-burger-menu__widgets flix-header-burger-menu__widgets--has-container">
          <button type="button" class="flix-btn flix-btn--link" data-popup="language-switcher-header-widget">
            <img
              class="flix-flag"
              src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg"
              alt="Deutsche Flagge"
              width="24"
              height="24"
            />
            Deutsch
          </button>
        </div>
      </div>
      <div class="flix-header-burger-menu__overlay flix-overlay"></div>
    </div>
  </div>
</header>
<div id="language-switcher-header-widget" class="flix-language-switcher" aria-label="Language selection" role="dialog" aria-modal="true" hidden>
  <div class="flix-language-switcher__body">
    <button
      type="button"
      class="flix-btn flix-btn--link flix-btn--square flix-btn--md flix-language-switcher__close"
      aria-label="Close language selection"
    ></button>
    <section aria-labelledby="suggested-domains" class="flix-language-switcher__region flix-language-switcher__region--columns">
      <h2 id="suggested-domains" class="flix-h4 flix-h4--section-header">Suggested domains</h2>
      <ul class="flix-language-switcher__list">
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="de" aria-current="true">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg" alt="Deutsche Flagge" />
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/eu.svg" alt="European Union flag" />
            English
          </a>
        </li>
      </ul>
    </section>
    <section aria-labelledby="europe" class="flix-language-switcher__region flix-language-switcher__region--columns">
      <h2 id="europe" class="flix-h4 flix-h4--section-header">Europe</h2>
      <ul class="flix-language-switcher__list">
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="bs">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ba.svg" alt="Zastava Bosne i Hercegovine" />
            Bosanski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="bg">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/bg.svg" alt="Знаме на България" />
            Български
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="ca">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/es-ct.svg" alt="Bandera de Catalunya" />
            Català
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="cs">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/cz.svg" alt="Vlajka České republiky" />
            Čeština
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="da">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/dk.svg" alt="Danmarks flag" />
            Dansk
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="de" aria-current="true">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg" alt="Deutsche Flagge" />
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="de-at">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/at.svg" alt="Flagge Österreichs" />
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="de-ch">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Flagge der Schweiz" />
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="et">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ee.svg" alt="Eesti lipp" />
            Eesti
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="el">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/gr.svg" alt="Σημαία της Ελλάδας" />
            Ελληνικά
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/eu.svg" alt="Europe flag" />
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-gb">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/gb.svg" alt="United Kingdom flag" />
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-ie">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ie.svg" alt="Ireland flag" />
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-es">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/es.svg" alt="Bandera de España" />
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/fr.svg" alt="Drapeau de la France" />
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr-be">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/be.svg" alt="Drapeau de la Belgique" />
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr-ch">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Drapeau de la Suisse" />
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="hr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/hr.svg" alt="Zastava Hrvatske" />
            Hrvatski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="it">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/it.svg" alt="Bandiera d'Italia" />
            Italiano
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="it-ch">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Bandiera della Svizzera" />
            Italiano
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="lv">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/lv.svg" alt="Latvijas karogs" />
            Latviešu
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="lt">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/lt.svg" alt="Lietuvos vėliava" />
            Lietuvių
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="hu">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/hu.svg" alt="Magyarország zászlója" />
            Magyar
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="mk">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/mk.svg" alt="Знаме на Северна Македонија" />
            Македонски
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="nl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/nl.svg" alt="Vlag van Nederland" />
            Nederlands
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="nl-be">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/be.svg" alt="Vlag van België" />
            Nederlands
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="nb">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/no.svg" alt="Norges flagg" />
            Norsk (bokmål)
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="pl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/pl.svg" alt="Flaga Polski" />
            Polski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="pt-pt">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/pt.svg" alt="Bandeira de Portugal" />
            Português
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="ro">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ro.svg" alt="Steagul României" />
            Română
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sq">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/al.svg" alt="Flamuri i Shqipërisë" />
            Shqip
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sk">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/sk.svg" alt="Vlajka Slovenska" />
            Slovenčina
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/si.svg" alt="Zastava Slovenije" />
            Slovenščina
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/rs.svg" alt="Застава Србије" />
            Srpski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fi">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/fi.svg" alt="Suomen lippu" />
            Suomi
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sv">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/se.svg" alt="Sveriges flagga" />
            Svenska
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="tr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/tr.svg" alt="Türkiye bayrağı" />
            Türkçe
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="uk-ua">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ua.svg" alt="Прапор України" />
            Українська
          </a>
        </li>
      </ul>
    </section>
    <section aria-labelledby="north-and-south-america" class="flix-language-switcher__region flix-language-switcher__region--columns">
      <h2 id="north-and-south-america" class="flix-h4 flix-h4--section-header">North &amp; South America</h2>
      <ul class="flix-language-switcher__list">

        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-ca">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ca.svg" alt="Canada flag" />
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-us">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="United States flag" />
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-cl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/cl.svg" alt="Bandera de Chile" />
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-mx">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/mx.svg" alt="Bandera de México" />
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-us">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="Bandera de los Estados Unidos" />
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr-ca">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ca.svg" alt="Drapeau du Canada" />
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="pt-br">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/br.svg" alt="Bandeira do Brasil" />
            Português
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="zh-us">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="美国国旗" />
            中文
          </a>
        </li>
      </ul>
    </section>
  </div>
  <div class="flix-overlay"></div>
</div>

Display Options

It is possible to have multiple sections (flix-language-switcher__region elements) within the popup. This is specifically useful if you want to categorise countries/languages by continent or other groups.

You can switch between the "row" based and "column" based order of items within the region with a flix-language-switcher__region--columns CSS class name. The items are ordered in rows by default.

Users tend to prefer the column based sorting if many items are presented in the list. However, as a best practice we recommend splitting longer lists into smaller categories when possible so the items are easier to find.

Bellow are some examples without the grouping showcasing both layouts.

Column layout:

<button
  type="button"
  class="flix-btn flix-btn--link "
  data-popup="language-selection-popup-column-layout"
>
  <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg" alt="Deutschhland" />
  Deutsch
  <span class="flix-sr-only">Open language selection</span>
</button>
<div id="language-selection-popup-column-layout" class="flix-language-switcher" aria-label="Language selection" hidden>
  <div class="flix-language-switcher__body">
    <button
      id="close-button-column-layout"
      type="button"
      aria-label="Close language selection"
      class="flix-language-switcher__close flix-btn flix-btn--square flix-btn--md flix-btn--link"
    ></button>
    <section class="flix-language-switcher__region flix-language-switcher__region--columns">
      <ul class="flix-language-switcher__list">
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="bs">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ba.svg" alt="Bosna i Hercegovina">
            Bosanski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="bg">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/bg.svg" alt="България">
            Български
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="ca">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/es-ct.svg" alt="Catalunya">
            Català
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="cs">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/cz.svg" alt="Česká republika">
            Čeština
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="da">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/dk.svg" alt="Danmark">
            Dansk
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="de" aria-current="true">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg" alt="Deutschland">
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="de-at">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/at.svg" alt="Österreich">
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="de-ch">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Schweiz">
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="et">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ee.svg" alt="Eesti">
            Eesti
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="el">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/gr.svg" alt="Ελλάδα">
            Ελληνικά
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/eu.svg" alt="Europe">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-au">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/au.svg" alt="Australia">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-ca">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ca.svg" alt="Canada">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-gb">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/gb.svg" alt="United Kingdom">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-ie">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ie.svg" alt="Ireland">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-in">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/in.svg" alt="India">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-us">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="United States">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-cl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/cl.svg" alt="Chile">
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-es">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/es.svg" alt="España">
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-mx">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/mx.svg" alt="México">
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-us">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="Estados Unidos">
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/fr.svg" alt="France">
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr-be">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/be.svg" alt="Belgique">
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr-ca">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ca.svg" alt="Canada">
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr-ch">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Suisse">
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="hr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/hr.svg" alt="Hrvatska">
            Hrvatski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="it">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/it.svg" alt="Italia">
            Italiano
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="it-ch">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Svizzera">
            Italiano
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="lv">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/lv.svg" alt="Latvija">
            Latviešu
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="lt">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/lt.svg" alt="Lietuva">
            Lietuvių
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="hu">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/hu.svg" alt="Magyarország">
            Magyar
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="mk">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/mk.svg" alt="Североска Македонија">
            Македонски
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="nl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/nl.svg" alt="Nederland">
            Nederlands
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="nl-be">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/be.svg" alt="België">
            Nederlands
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="nb">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/no.svg" alt="Norge">
            Norsk (bokmål)
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="pl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/pl.svg" alt="Polska">
            Polski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="pt-br">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/br.svg" alt="Brasil">
            Português
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="pt-pt">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/pt.svg" alt="Portugal">
            Português
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="ro">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ro.svg" alt="România">
            Română
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sq">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/al.svg" alt="Shqipëri">
            Shqip
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sk">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/sk.svg" alt="Slovensko">
            Slovenčina
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/si.svg" alt="Slovenija">
            Slovenščina
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/rs.svg" alt="Srbija">
            Srpski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fi">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/fi.svg" alt="Suomi">
            Suomi
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sv">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/se.svg" alt="Sverige">
            Svenska
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="tr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/tr.svg" alt="Türkiye">
            Türkçe
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="uk-ua">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ua.svg" alt="Україна">
            Українська
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="zh-us">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="美国">
            中文
          </a>
        </li>
      </ul>
    </section>
  </div>
  <div class="flix-overlay"></div>
</div>

Rows layout:

<button
  aria-expanded="false"
  type="button"
  class="flix-btn flix-btn--link "
  data-popup="language-selection-popup-row-layout"
>
  <img class="flix-flag flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/gb.svg" alt="United Kingdom" />
  English
  <span class="flix-sr-only">Open language selection</span>
</button>
<div id="language-selection-popup-row-layout" class="flix-language-switcher" aria-label="Language selection" hidden>
  <div class="flix-language-switcher__body">
    <button
      id="close-button-row-layout"
      type="button"
      aria-label="Close language selection"
      class="flix-language-switcher__close flix-btn flix-btn--square flix-btn--md flix-btn--link"
    ></button>
    <section class="flix-language-switcher__region">
      <ul class="flix-language-switcher__list">
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="bs">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ba.svg" alt="Bosna i Hercegovina">
            Bosanski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="bg">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/bg.svg" alt="България">
            Български
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="ca">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/es-ct.svg" alt="Catalunya">
            Català
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="cs">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/cz.svg" alt="Česká republika">
            Čeština
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="da">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/dk.svg" alt="Danmark">
            Dansk
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="de" aria-current="true">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg" alt="Deutschland">
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="de-at">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/at.svg" alt="Österreich">
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="de-ch">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Schweiz">
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="et">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ee.svg" alt="Eesti">
            Eesti
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="el">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/gr.svg" alt="Ελλάδα">
            Ελληνικά
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/eu.svg" alt="Europe">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-au">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/au.svg" alt="Australia">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-ca">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ca.svg" alt="Canada">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-gb">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/gb.svg" alt="United Kingdom">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-ie">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ie.svg" alt="Ireland">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-in">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/in.svg" alt="India">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="en-us">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="United States">
            English
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-cl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/cl.svg" alt="Chile">
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-es">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/es.svg" alt="España">
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-mx">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/mx.svg" alt="México">
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="es-us">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="Estados Unidos">
            Español
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/fr.svg" alt="France">
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr-be">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/be.svg" alt="Belgique">
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr-ca">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ca.svg" alt="Canada">
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fr-ch">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Suisse">
            Français
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="hr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/hr.svg" alt="Hrvatska">
            Hrvatski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="it">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/it.svg" alt="Italia">
            Italiano
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="it-ch">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Svizzera">
            Italiano
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="lv">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/lv.svg" alt="Latvija">
            Latviešu
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="lt">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/lt.svg" alt="Lietuva">
            Lietuvių
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="hu">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/hu.svg" alt="Magyarország">
            Magyar
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="mk">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/mk.svg" alt="Североска Македонија">
            Македонски
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="nl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/nl.svg" alt="Nederland">
            Nederlands
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="nl-be">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/be.svg" alt="België">
            Nederlands
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="nb">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/no.svg" alt="Norge">
            Norsk (bokmål)
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="pl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/pl.svg" alt="Polska">
            Polski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="pt-br">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/br.svg" alt="Brasil">
            Português
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="pt-pt">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/pt.svg" alt="Portugal">
            Português
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="ro">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ro.svg" alt="România">
            Română
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sq">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/al.svg" alt="Shqipëri">
            Shqip
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sk">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/sk.svg" alt="Slovensko">
            Slovenčina
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sl">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/si.svg" alt="Slovenija">
            Slovenščina
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/rs.svg" alt="Srbija">
            Srpski
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="fi">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/fi.svg" alt="Suomi">
            Suomi
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="sv">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/se.svg" alt="Sverige">
            Svenska
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="tr">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/tr.svg" alt="Türkiye">
            Türkçe
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="uk-ua">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ua.svg" alt="Україна">
            Українська
          </a>
        </li>
        <li class="flix-language-switcher__item">
          <a href="#" class="flix-language-switcher__link" lang="zh-us">
            <img class="flix-flag flix-language-switcher__flag" width="24" height="24" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="美国">
            中文
          </a>
        </li>
      </ul>
    </section>
  </div>
  <div class="flix-overlay"></div>
</div>

Using the popup plugin

Using the popup plugin is easy and will handle most of the javascript hard work for you:

  • Include the plugin from our CDN at the end of your page: 
    <script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/popup.js"></script>
  • Initialize the plugin: 
    document.addEventListener("DOMContentLoaded", function() {
  popup.init();
});

Building the language switcher popup:

  1. Add an id to the flix-language-switcher element and initialize it with the hidden attribute, so it's closed;
  2. Use the popup id and connect it to the toggle using data-popup="{THE_POPUP_ID}";
  3. In order for the plugin to work you need to tell it what are the first and last focusable elements of the popup body:
  • Give each of them an id;
  • Pass them to the toggle using data-firstFocusable="{THE_ELEMENT_ID}" and data-lastFocusable="{THE_ELEMENT_ID}";
  • It is recommended that the close button be the first focusable element of the popup body;
  1. Accessibility guidelines dictates that all dialogs must have a label:
  • You can either give the popup and aria-label;
  • Or you can associate the popup title with and id and aria-labelledby;
  1. The plugin will take care of the following:
  • Adding the right role and aria-modal values to the popup element;
  • Toggling the hidden attribute to show and hide the popup;
  • Adding ESC key press support for closing the popup with the keyboard;
  • Creating a tab trap that doesn't allow the user to tab away from the popup (cycles tabs from the first and the last focusable items);
  • Adding the close button click handler if a close button is present;

Feel free to inspect the examples above if your need more details on how it works.

Making it work without the plugin

  1. to identify the language switcher popup as a dialog landmark, add the following attributes popup element:
  • role="dialog"
  • aria-modal="true";
  1. To show and hide the popup, toggle the hidden attribute from the popup element;
  2. When opening the popup:
  • Remove the hidden attribute;
  • Set focus to the __close button, which must be the first focusable element;
  • Create a tab trap that cycles the tab order between the first and last focusable element;
  1. When closing the popup:
  • Users must be able to close the popup by pressing the __close button as well as pressing the ESC key on the keyboard;
  • Add the hidden attribute;
  • Set focus back to the target button where the interaction started;

Related Components