Build a locale switcher

Design a custom locale switcher for efficient navigation between your site’s locales.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

Once you’ve published your localized site, you’ll want to build a way for your site visitors to select the right locale or language that meets their needs. With the Locales list element, you can build a locale switcher. The Locales list element works similarly to the Collection list element and displays all locales that have publishing enabled. 

You can customize the design however you like, but here, we’ll cover how to build a locale switcher dropdown in a navbar, where the dropdown text indicates the current locale.

Before you get started: Check out the Localization overview to familiarize yourself with Localization. Make sure you’re editing your primary locale when building the locale switcher (i.e., make sure you’ve chosen your primary locale from the Locale view dropdown). Add a navbar to your site and drag a dropdown element into the navbar.

To build your locale switcher: 

  1. Open the Navigator panel
  2. Click the arrow next to the dropdown element to show its child elements
  3. Go to Add panel > Advanced
  4. Drag a Locales list element into your navbar 
  5. Drag the dropdown element inside the Locales wrapper element (you can use the Navigator to precisely drag-and-drop your element)
  6. Drag the Locales list inside the dropdown list element 
  7. Delete the dropdown link elements
  8. Select the text block element inside the dropdown toggle element
  9. Go to Element settings panel > Text block settings
  10. Click the purple “dot” icon 
  11. Choose Locale name 
  12. Style your dropdown element and child elements however you want

Now, your locale switcher dropdown will display all locales that have Enable publishing to this subdirectory toggled “on” in Settings panel > Localization, and the dropdown text will match the current locale name (e.g., “English (United States)”). Locales are automatically added to the published Locales list and the locale switcher when publishing is enabled. Learn more about publishing locales.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top