How to add a language switcher in Webflow

To add a language switcher in Webflow, drag a Dropdown element into your navigation, delete its three placeholder links, and put a Locales list element inside the dropdown. The Locales list shows every locale you’ve published, linking each to the same page in that language. Then set the dropdown’s label to show the current locale, so visitors can see which version they’re on. You need Webflow Localize and at least one published secondary locale.

This is how Altus’s switcher is built: “EN” with a globe icon in the navigation, opening to English and Deutsch. Here are the steps, and the design choices that make a switcher easy to use.

Altus’s language switcher on its pricing page, built from a Dropdown and Webflow’s Locales list. Choosing Deutsch opens /de/pricing.

Before you start

The switcher lists locales that have publishing switched on, in the Localize panel under Locales. Publishing a secondary locale needs a paid site plan and a paid Localize add-on (Webflow). If you haven’t added a language yet, start with how to add another language to a Webflow site.

1. Add a Dropdown

1. Open the Add panel (press A) and scroll to Advanced.
2. Drag a Dropdown element into your navbar.
3. In the Navigator, expand the Dropdown and delete the three placeholder links (Link 1, Link 2, Link 3) from its Navigation element.

2. Add the Locales list

1. From the Add panel’s Advanced section, drag a Locales list into the Dropdown’s Navigation element.
2. Each item has a link bound to the locale’s display name by default, such as “English (United States)”.
3. To change what it shows, select the link, open Element settings, and choose from Locale (en-US), Language (en), Country (US) or Display name.

The Locales list works like a Collection list: it repeats for every published locale, and new locales appear in it automatically when you switch their publishing on (Webflow). On Altus, each link goes to the current page in the other language, so a visitor on the pricing page lands on the German pricing page, not the German home page.

3. Show the current language

Select the text inside the Dropdown Toggle (it reads “Dropdown” by default), open Element settings, click the purple dot next to the Text field, and choose one of the Current Locale options. The label now changes with the version the visitor is on: Altus shows “EN” on English pages and “DE” on German ones.

4. Add flags, if you use them

If you’ve set a display image for each locale, add an Image element inside the Locale item and bind it to Locale Image. Do the same inside the Dropdown Toggle, bound to the current locale’s image.

Use flags with care. A flag is a country, not a language: German is spoken in Germany, Austria and Switzerland, and English in a dozen countries. Altus uses a globe icon and each language’s own name instead.

Design choices that matter

• Name each language in its own language. “Deutsch”, not “German”, so a German speaker recognises it on an English page. Altus lists English and Deutsch.
• Put it where people look. The top right of the navigation is the usual spot. Altus also has one in the footer.
• Keep it in the mobile menu. Check the switcher still appears, and still works, when the navigation collapses on a phone.
• Keep the page. Switching should keep the visitor on the same page, as the Locales list does, rather than sending them back to the home page.
• Respect the choice. If you also route visitors automatically by browser language, make sure someone who picks a language isn’t sent back again. More on routing in Webflow Localization: how to set it up.

Questions we get asked

Does Webflow have a built-in language switcher?

Yes, in pieces. Webflow Localize includes a Locales list element that lists every published locale and links to each version of the current page. Put it inside a Dropdown element and you have a switcher you can style like the rest of the site.

Why isn’t my language showing in the Webflow switcher?

The Locales list only shows locales with publishing turned on, in the Localize panel under Locales. Publishing a secondary locale needs a paid site plan and a paid Localize add-on. Once publishing is on, the locale appears in the switcher automatically.

Should a language switcher use flags?

Usually not on their own. Flags stand for countries, and many languages are spoken in several countries, so a flag can confuse visitors. Show each language’s own name, such as Deutsch or Français, with a globe icon if you want a visual cue.

Where should the language switcher go?

Top right of the navigation, the usual spot, and in the mobile menu. A second one in the footer helps visitors who scroll to the bottom looking for it. Altus has both.

If you’re adding a language to your site, see our Webflow and custom development service, or tell us about your site.

Sources

• Webflow Help Center, Build a locale switcher
• Webflow Help Center, Locales list and locale data