Build a locale switcher

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

You can also add an image to your locale switcher to show each locale’s display image (i.e., icon or flag) along with its name:

1. Go to Add panel > Media
2. Drag an image element inside the dropdown toggle element
3. Go to Element settings panel > Image settings
4. Click the purple “dot” icon
5. Choose Locale image
6. Style your image 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 and image will match the current locale (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.