# Language switcher

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](https://lovelyrender.com/documentation/add-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](https://lovelyrender.com/documentation/header-menu-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.

**Note:** On a single-language site, the block shows nothing on the site. Its settings show “This block appears as soon as the site has at least two content languages”. You can place it before adding your second language: it will appear the day you add it ([Add a language](https://lovelyrender.com/documentation/add-language/)).

## 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** |

![The settings of the Language switcher: the Region name field, then the Language switcher panel with Display set to The language name (Français, English), Language display set to Side by side, then the notice saying that the block appears as soon as the site has at least two content languages.](https://static.lovelyrender.com/uploads/2026/10/937-doc-blocs2-selecteur-de-langue.png)

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.

**Tip:** Keep two differences for the language of the page, a color and a weight for example. A difference in color alone escapes visitors who have trouble telling colors apart.

## 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](https://lovelyrender.com/documentation/button-block/): 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.

**Tip:** In a footer, set the switcher to **In a menu** and add a globe as the start icon. You get a discreet line that unfolds your languages upward.

## 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 `Enter` or `Space` and tells whether the list is open. `Esc` closes 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](https://lovelyrender.com/documentation/language-suggestion-block/) block offers them this page in their language.

## See also

- [Language suggestion](https://lovelyrender.com/documentation/language-suggestion-block/)
- [Add a language](https://lovelyrender.com/documentation/add-language/)
- [Translate a page](https://lovelyrender.com/documentation/translate-page/)
- [Offer visitors their language](https://lovelyrender.com/documentation/offer-visitor-language/)