Language switcher as a vital feature of multilingual Drupal 8 sites

Multilingual websites have clear business benefits. Customers who order website creation or improvement want the highest level of their user-friendliness.

Among the vital elements of an easy-to-use multilingual site is a language switcher. Let’s discuss what this switcher is, see beautiful examples of it, and review how it works in Drupal 8 — the best CMS for multilingual websites.

What is the language switcher?

A multi-language switcher is a UI element allowing users to view content in their preferred tongue. Switchers are included in the website’s header, footer, navigation, near the content posts, and more.

They can be in the form of buttons, dropdown menus, lists, flags, etc. The form doesn’t matter — it just needs to be obvious and convenient for users to switch between the versions.

Best Examples of Language Switch Designs

Amazon.de

Germany’s version of the famous e-commerce platform offers a handy dropdown with radio buttons. The languages presented on amazon.de are German, Dutch, Polish, Turkish, and Czech.

Nokia

Very user-friendly in its simplicity, the multilingual switcher on the Nokia Corporation’s website offers links to the appropriate versions. Their list is really impressive and contains 26 languages.

Croatia.hr

The Drupal 8 website for the Croatian National Tourist Board has a very stylish switcher. Fifteen languages to a person’s choice are presented as country flags with labels. The flags are filled with color when the user hovers over them.

Language switcher in Drupal 8

Since Drupal 8 is multilingual out-of-the-box, it also has a built-in language switcher. It is included in the whole package of its impressive multilingual features (almost a hundred languages supported, interface translations ready, easy setup, RTL, and more).

The switcher can be added anywhere on your website and allows flexible configuration as to the languages included, custom label (e.g. “Choose your language”), etc. These are pretty basic things, the rest is up to developers who can create the switcher’s perfect look and functionality.

How to add a language switcher in Drupal 8

Adding a switcher only becomes available after you enable the multilingual functionality. So we will run through these preparatory steps very briefly — although there are many other interesting options to configure.

1) Enabling the multilingual modules

We need to enable the multilingual modules in Drupal 8 core:

• Configuration Translation
• Content Translation
• Interface Translation
• Language

2) Adding a language

Then in the Configuration section, we will see the “Regional and language” subsection. We click on “Languages” to add new ones to the site. It will offer a dropdown of almost a hundred languages as well as the “custom language” option.

3) Creating a language selector for editors

The language selector is a kind of language switcher but for content editors. To get it, we need to choose which content types and their particular fields will be translatable in “Regional and language” — “Content language and translation.”

This will let editors select the language to write in and use the “Translate” tab.

4) Creating a language switcher for users

Finally, we can get a content switcher for website users so they can switch between the content versions. Drupal provides a “Language switcher” block. Like all other blocks, it is found in Structure — Block layout.

We need to click on the region in which we want to place the switcher. Then we find the language switcher block on the list of available blocks, click “Place block” again, and save blocks.

While placing the block (or at any time) we can choose a custom title for it (for example, “Select language”) or choose to display no title at all. We can also select the languages to show in the switcher, which by default will mean all.

We put in the “Sidebar first” region:

Or maybe we could move it to the header by clicking on the pencil near the block and opening the configuration settings:

This and many other options are provided by Drupal out-of-the-box. But, of course, your language switcher will look much more stylish after our developers apply their CSS, JavaScript, and other front-end skills.

Video about creating a language switcher to a Drupal 8 site

We have created a brief video with the above described process. Enjoy!

Create a language switcher or a multilingual site!

You can always entrust our Drupal support experts with:

• creating a language switcher for your site according to your vision
• building you a feature-rich multilingual site from scratch in any industry

Let’s do it — your multilingual audience is waiting!