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 shows a link that opes 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.

The component is divided in 2 parts: the toggle button and the panel.

Toggle button location

The language switcher toggle button can be placed anywhere in the code, but the usual places are the header widgets area and the header burger menu widgets area.

When placed on the burger menu, the toggle will expand to match the burger menu navigation links.

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 popup".

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">
      <div class="flix-language-switcher">
        <button
          type="button"
          class="flix-language-switcher__toggle"
          aria-expanded="false"
          data-popup="language-switcher-header-widget"
        >
          <img
            class="flix-language-switcher__flag"
            src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg"
            alt="Deutsche Flagge"
          />
          Deutsch
        </button>
      </div>
    </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">
          <div class="flix-language-switcher">
            <button
              type="button"
              class="flix-language-switcher__toggle"
              aria-expanded="false"
              data-popup="language-switcher-header-widget"
            >
              <img
                class="flix-language-switcher__flag"
                src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg"
                alt="Deutsche Flagge"
              />
              Deutsch
            </button>
          </div>
        </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-popup" aria-label="Language selection" role="dialog" aria-modal="true" hidden>
  <div class="flix-language-switcher-popup__body">
    <button
      type="button"
      class="flix-btn flix-btn--link flix-btn--square flix-btn--md flix-language-switcher-popup__close"
      aria-label="Close language selection"
    ></button>
    <section aria-labelledby="suggested-domains" class="flix-language-switcher-popup__region flix-language-switcher-popup__region--columns">
      <h2 id="suggested-domains" class="flix-h4 flix-h4--section-header">Suggested domains</h2>
      <ul class="flix-language-switcher-popup__list">
        <li class="flix-language-switcher-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="de" aria-current="true">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en">
            <img
              class="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-popup__region flix-language-switcher-popup__region--columns">
      <h2 id="europe" class="flix-h4 flix-h4--section-header">Europe</h2>
      <ul class="flix-language-switcher-popup__list">

        <li class="flix-language-switcher-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="bs">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="bg">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="ca">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="cs">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="da">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="de" aria-current="true">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="de-at">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="de-ch">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="et">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="el">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-gb">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-ie">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-es">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr-be">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr-ch">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="hr">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="it">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="it-ch">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="lv">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="lt">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="hu">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="mk">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="nl">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="nl-be">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="nb">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="pl">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="pt-pt">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="ro">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sq">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sk">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sl">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sr">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fi">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sv">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="tr">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="uk-ua">
            <img
              class="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-popup__region flix-language-switcher-popup__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-popup__list">

        <li class="flix-language-switcher-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-ca">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-us">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-cl">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-mx">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-us">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr-ca">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="pt-br">
            <img
              class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="zh-us">
            <img
              class="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-popup__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-popup__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:

<div class="flix-language-switcher">
  <button
    type="button"
    class="flix-language-switcher__toggle"
    data-popup="language-selection-popup-column-layout"
  >
    <img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg" alt="United Kingdom" />
    Deutsch
    <span class="flix-sr-only">Open language selection</span>
  </button>
</div>
<div id="language-selection-popup-column-layout" class="flix-language-switcher-popup" aria-label="Language selection" hidden>
  <div class="flix-language-switcher-popup__body">
    <button
      id="close-button-column-layout"
      type="button"
      aria-label="Close language selection"
      class="flix-language-switcher-popup__close flix-btn flix-btn--square flix-btn--md flix-btn--link"
    ></button>
    <section class="flix-language-switcher-popup__region flix-language-switcher-popup__region--columns">
      <ul class="flix-language-switcher-popup__list">
        <li class="flix-language-switcher-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="bs">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="bg">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="ca">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="cs">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="da">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="de" aria-current="true">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="de-at">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="de-ch">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="et">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="el">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-au">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-ca">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-gb">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-ie">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-in">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-us">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-cl">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-es">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-mx">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-us">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr-be">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr-ca">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr-ch">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="hr">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="it">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="it-ch">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="lv">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="lt">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="hu">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="mk">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="nl">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="nl-be">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="nb">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="pl">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="pt-br">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="pt-pt">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="ro">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sq">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sk">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sl">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sr">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fi">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sv">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="tr">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="uk-ua">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="zh-us">
            <img class="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:

<div class="flix-language-switcher">
  <button
    aria-expanded="false"
    type="button"
    class="flix-language-switcher__toggle"
    data-popup="language-selection-popup-row-layout"
  >
    <img class="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>
<div id="language-selection-popup-row-layout" class="flix-language-switcher-popup" aria-label="Language selection" hidden>
  <div class="flix-language-switcher-popup__body">
    <button
      id="close-button-row-layout"
      type="button"
      aria-label="Close language selection"
      class="flix-language-switcher-popup__close flix-btn flix-btn--square flix-btn--md flix-btn--link"
    ></button>
    <section class="flix-language-switcher-popup__region">
      <ul class="flix-language-switcher-popup__list">
        <li class="flix-language-switcher-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="bs">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="bg">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="ca">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="cs">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="da">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="de" aria-current="true">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="de-at">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="de-ch">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="et">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="el">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-au">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-ca">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-gb">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-ie">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-in">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="en-us">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-cl">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-es">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-mx">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="es-us">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr-be">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr-ca">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fr-ch">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="hr">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="it">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="it-ch">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="lv">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="lt">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="hu">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="mk">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="nl">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="nl-be">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="nb">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="pl">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="pt-br">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="pt-pt">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="ro">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sq">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sk">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sl">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sr">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="fi">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="sv">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="tr">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="uk-ua">
            <img class="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-popup__item">
          <a href="#" class="flix-language-switcher-popup__link" lang="zh-us">
            <img class="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-popup 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 __toggle button, where the interaction started;

Related Components