Mozilla Protocol
  • 16.0.1

Language Switcher

A component for changing the language of the current page.

Notes

  • Assumes the first path in the page URL immediately after hostname is a valid locale code e.g. https://www.mozilla.org/en-US/firefox/.
  • This component can be displayed inside the Footer component, 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.
<form class="mzp-c-language-switcher" method="get" action="#">

    <label for="mzp-c-language-switcher-select">Language</label>
    <select name="language" id="mzp-c-language-switcher-select" class="mzp-js-language-switcher-select">
        <option value="de">Deutsch</option>
        <option value="en">English</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
        <option value="hi-IN">हिन्दी (भारत)</option>
        <option value="ja">日本語</option>
    </select>

    <!-- form submit button is shown when JavaScript is not enabled -->
    <button type="submit">Go</button>
</form>

<script src="../../protocol/js/protocol-lang-switcher.js">
</script>

<script>
    (function() {
        'use strict';
        // a custom callback can be passed to the lang switcher for analytics purposes.
        Mzp.LangSwitcher.init(function(previousLanguage,
            newLanguage) {
            console.log('Previous language: ',
                previousLanguage);
            console.log('New language: ', newLanguage);
        })
    })();
</script>