LanguageSwitcher

LanguageSwitcher

Automatically shows the site's available languages as a switcher.

LanguageSwitcher

Works automatically based on the site's language variants. Hides itself when there is only one language.

Add this block to the header or footer of a multilingual site so visitors can switch to their preferred language without hunting for a link. It reads the language variants configured for the current page and lists only the ones that actually exist, so nothing needs to be maintained manually when a language is added or removed.

Because it hides itself automatically on single-language sites, it's safe to include in a shared header from the start — it simply has no effect until a second language is configured for the site.

Where to place it

The most common spot is the top-right of the header, next to or inside the main navigation, so it's visible without scrolling on every page. Sites with a simpler header sometimes move it to the footer instead, alongside social links and legal pages. On mobile, nest it inside MobileMenu so it doesn't compete for space with the hamburger trigger — the drawer has room for it that a compact mobile header doesn't.

Common mistakes and setup

Don't hand-write a separate list of language links elsewhere on the site 'just in case' — that list drifts out of sync the moment a language is added or removed, while LanguageSwitcher always reflects the live configuration. It's also worth checking that the pages a visitor actually lands on have a translated counterpart: the switcher links to the same content in another language via each record's translation link, so a page that only exists in one language won't have anywhere useful to send a visitor who switches. See multilingual for how translations are linked between records.

Label each option with the language's own name — 'Nederlands', 'English', '中文' — rather than a flag icon alone. Flags map to countries, not languages, and several languages are spoken across multiple countries, so a flag-only switcher is genuinely ambiguous for some visitors even though it looks tidy.

An international webshop typically relies on this block to let customers switch locales without losing their place in the catalogue, since the switcher preserves the equivalent page rather than dropping visitors back to the homepage. A professional-services firm operating in a border region — a law or accounting practice serving both Dutch- and English-speaking clients, for example — often keeps the switcher minimal, just two labels, precisely because most visitors only ever need one of the two.

Because each language variant is a distinct record, search engines can be pointed to the right one automatically through hreflang tags generated from the same translation links the switcher uses — so setting up multilingual content correctly once benefits both this block and search visibility, without maintaining the two separately.

lang.jsx
<LanguageSwitcher />