Language Switcher

Language switcher

A UI molecule for changing the language of the current page.

<form class="mzp-c-language-switcher " method="get"
  <a class="mzp-c-language-switcher-link" href="">Language</a>
  <select id="mzp-c-language-switcher-select"
   class="mzp-js-language-switcher-select" name="lang">
    <option value="en-US">English (US)</option>
    <option value="de">Deutsch</option>
    <option value="fr">Français</option>
    <option value="es-ES">Español</option>
    <option value="ja">日本語</option>
  <!-- form submit button is shown when JavaScript is not enabled -->
  <button type="submit">Go</button>


  (function() {
    'use strict';
    // a custom callback can be passed to the lang switcher for analytics purposes.
      newLanguage) {
      console.log('Previous language: ',
      console.log('New language: ', newLanguage);


  • Assumes the first path in the page URL immediately after hostname is a valid locale code e.g.
  • This molecule can be displayed inside the Footer organism, but could also be used elsewhere if more appropriate.
  • The link mzp-c-cta-link is optional, and should be used only if a website has a page dedicated to language selection. If omitted, the form <label> will be displayed visually instead.
  • An optional theme class mzp-t-dark can be applied for use on dark backgrounds.
  • Inline JavaScript in this example is for demo purposes only. Use external files in production code.