The Language switcher block lets your visitors switch from one language to another. Each entry leads to the version of the page in that language. This page describes its settings, the look of the entry, the presentation in a menu and what happens when a translation is missing.
Add the block
Insert the Language switcher block (Add a block), or type language in the block search. Place it in the header or the footer of the site so that it is on every page (Write the header, menu and footer once).
The block lists the content languages of the site, in the order of the languages screen. Each entry leads to the version of the page the visitor is reading. A reader of an English article who chooses “Français” gets that same article in French.
Set up the switcher
Select the Language switcher block, Settings tab, Language switcher panel.
| Setting | Effect | Default value |
|---|---|---|
| Region name | At the top of the Settings tab, the name that screen readers announce for the switcher. When empty, it is called Language. | Empty |
| Show | The language name (Français, English) or The short code (FR, EN). | The language name (Français, English) |
| How the languages are shown | Side by side: all the languages in a row. In a menu: a button that names the language of the page opens the list of all the languages. | Side by side |
On the published page, each language is written in its own language, with a capital letter: German is shown as “Deutsch”. A visitor recognizes their language without reading yours.
The layout is set in the Flex layout panel: the direction, the alignment and the gap between the languages. The saved style Language switcher puts 8 px between two languages. A step chosen on the Gap slider replaces this gap; brought back to 0, the slider returns the 8 px of the style. To remove the gap, remove the style.
Style the language entry
The look is set on the entry. The switcher contains a single Language entry block, from which each language is drawn. You cannot add a second one.
| State | Styles |
|---|---|
| Default | A language the visitor can choose. |
| Hover | The language under the pointer. |
| Focus | The language reached with the keyboard. |
| Active | The language of the current page. |
The entry has the saved style Language entry: a slightly smaller text, with no underline at rest, underlined on hover and on focus. The language of the page is in the primary color and bold.
In the editor, the switcher is displayed as on the page: the language of the page first, in its Active state, then the others. A click on one of them selects the entry. On a single-language site, the editor shows yours and two examples taken from English, Français and Español.
Present the languages in a menu
With In a menu, the switcher shows a button that names the language of the page. A click, or Enter on the keyboard, opens the list of all the languages. This presentation suits a busy header or a footer.
| Block | Role | Settings |
|---|---|---|
| Language entry | Each language of the list. | The Styles tab, with the Active state for the language of the page. |
| Language menu button | The button that names the language of the page and opens the list. | The Styles tab, its icons and its animations. Its states are Default, Hover, Focus and Active, the one of the open menu. |
| Language menu | The surface on which the list opens. | The Styles tab and the Flex layout layout. |
- The button comes with a down arrow at the end, which becomes an up arrow in the Active state. Its icons are set in the Icons panel of the Styles tab, as on a Button: one at the start, one at the end, each per state.
- The button has the style Language menu button: a slightly smaller text, inner space and rounded corners. It gets a light background on hover, on focus and when the menu is open.
- The menu has the style Language menu: a light background and dark text, the reverse in dark mode. It has rounded corners, a shadow and lays out the languages in a column.
- In the Side by side presentation, the button and the menu are not displayed. Their styling is kept for the day you switch back to a menu.
The menu opens below the button. At the bottom of the page, with no room below, it opens upward; at the right edge of the screen, inward. It closes with a second click, a click elsewhere on the page, the Esc key or when focus leaves it. It never opens on hover.
When a translation is missing
- A language in which the page does not exist stays in the list. Its entry leads to the home page of that language.
- A draft translation does not count: until it is published, the entry of its language leads to the home page.
- On a page that is not a content, all the entries lead to the home page of their language. This is the case for the home page, a list, a search results page or an error page.
The list always shows all the languages, including the one of the page. The visitor thus knows which language they are reading.
On a phone
Side by side, the languages follow the layout of the Flex layout panel, screen by screen. In a phone header, In a menu takes only the space of a button, whatever the number of languages.
Accessibility
- Each link declares the language of its destination: a screen reader pronounces “English” with an English accent.
- The language of the page is flagged on screen and to assistive technologies.
- The switcher is announced as a navigation region named Language. If the page has two switchers, give each one a Region name.
- In a menu, the button is a real button: it can be reached with the keyboard, activated with
EnterorSpaceand tells whether the list is open.Esccloses the list and returns focus to the button.
A visitor who does not know your page exists in their language does not look for a switcher. The Language suggestion block offers them this page in their language.