Language Picker

A custom selector allowing users to choose their preferred language on a page.

How to

The Language Picker can be used to change the default language of a website.

The component HTML is a <form> element composed of a <label> and a <select> to choose among different language options.

On devices where JavaScript is enabled, the default <select> is replaced with a <button> element and a custom dropdown list of languages.

The text of the <label> element is used as aria-label for the custom <button> element, while the data-trigger-class attribute of the .language-picker element can be used to pass a list of custom classes to be added to the custom <button> element (for example, data-trigger-class="btn btn--subtle").

If you want to change the arrow icon inside the <button> element, you can update the arrowSvgPath property of the LanguagePicker object defined in the language-picker.js file. If you want to modify the glob icon (visible in the default version only), you can update the globeSvgPath property:

var LanguagePicker = function(element) {
  this.element = element;
  this.select = this.element.getElementsByTagName('select')[0];
  // ...
  this.arrowSvgPath = '<svg viewBox="0 0 12 12"><path d="M11.5,2H.5a.5.5,0,0,0-.412.783l5.5,8a.5.5,0,0,0,.824,0l5.5-8A.5.5,0,0,0,11.5,2Z" fill="currentColor"/></svg>';
  this.globeSvgPath = '<svg viewBox="0 0 16 16"><path d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M13.9,7H12c-0.1-1.5-0.4-2.9-0.8-4.1 C12.6,3.8,13.6,5.3,13.9,7z M8,14c-0.6,0-1.8-1.9-2-5H10C9.8,12.1,8.6,14,8,14z M6,7c0.2-3.1,1.3-5,2-5s1.8,1.9,2,5H6z M4.9,2.9 C4.4,4.1,4.1,5.5,4,7H2.1C2.4,5.3,3.4,3.8,4.9,2.9z M2.1,9H4c0.1,1.5,0.4,2.9,0.8,4.1C3.4,12.2,2.4,10.7,2.1,9z M11.1,13.1 c0.5-1.2,0.7-2.6,0.8-4.1h1.9C13.6,10.7,12.6,12.2,11.1,13.1z"></path></svg>';
  // ...
};

The Language Picker component is viewport aware: its position, relative to the trigger element, is automatically updated based on the available space.

The vertical gap between the picker element and its control is set using the --picker-vertical-gap CSS custom property (deafult value is 4px).

Custom Dropdown Behaviour

The custom dropdown contains a list of links to the website in different languages.

To set the correct link, make sure to modify the getLanguageUrl() function in the language-picker.js file:

function getLanguageUrl(option) {
  // ⚠️ Important: You should replace this return value with the real link to your website in the selected language
  // option.value gives you the value of the language that you can use to create your real url (e.g, 'english' or 'italiano')
  return '#';
};

Make sure to modify the initLanguageSelection() function as well, removing the js code inside the else statement (that is a demo code only):

function initLanguageSelection(picker) {
  picker.element.getElementsByClassName('language-picker__list')[0].addEventListener('click', function(event){
    var language = event.target.closest('.language-picker__item');
    if(!language) return;

    if(language.hasAttribute('aria-selected') && language.getAttribute('aria-selected') == 'true') {
      // selecting the same language
      event.preventDefault();
      picker.trigger.setAttribute('aria-expanded', 'false'); // hide dropdown
    } else { 
      // ⚠️ Important: this 'else' code needs to be removed in production. 
      // The user has to be redirected to the new url -> nothing to do here
    }
  });
};

Flags Variation #

When using the flags variation, the flag icons are set in CSS using the ::before pseudo-element of the .language-picker__flag. E.g., this is how the italian flag is set:

.language-picker__flag--italiano::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23009345' d='M16,42H2c-1.105,0-2-0.895-2-2V8c0-1.105,0.895-2,2-2h14V42z'/%3E%3Cpath fill='%23CF2B36' d='M48,40c0,1.105-0.895,2-2,2H32V6h14c1.105,0,2,0.895,2,2V40z'/%3E%3Crect x='16' y='6' fill='%23E6E6E6' width='16' height='36'/%3E%3C/svg%3E");
}

The flag is set as background-image using SVG with Data URIs, but you can use a standard png/svg background-image if you prefer.

Categories

• Overlays

Bug report & feedback

Component Github page ↗