Design a custom locale switcher for efficient navigation between your site’s locales.
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. Using a Dropdown element and 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.
Add a dropdown for your locale switcher
To add a dropdown for your locale switcher:
Click the “Add Elements” icon in the left toolbar (or press A on your keyboard) to open the Add panel
In the Add panel, scroll down to Advanced
Drag a Dropdown element onto the canvas (e.g., into your navbar)
Open the Navigator and expand the Dropdown element to view its child elements
Delete the three placeholder links (Link 1, Link 2, Link 3) from the Dropdown > Navigation element
Add and configure a Locales list element
The Locales list element acts as the base of your locale switcher. It lets you display each published locale’s label (for example, its display name or language) and, optionally, an image like a flag icon.
To add a Locales list element to your dropdown:
Click the “Add Elements” icon in the left toolbar (or press A on your keyboard) to open the Add panel
In the Add panel, scroll down to Advanced
Drag a Locales list element into the Dropdown > Navigation element
By default, each locale in the list contains a text link element bound to the locale’s display name (for example, “English (United States)”). To change the link element’s text:
Click the Link element on the canvas or in the Navigator to select it
Click the “settings” icon or open the Element settings panel
Click the Text dropdown
-
Under Locales List Item, choose one of the following:
Locale (e.g., en-US)
Language (e.g., en)
Country (if set — e.g., US)
Display name (e.g., English (United States))
Your locale switcher dropdown will display all locales that have Enable publishing to this subdirectory toggled “on” in Settings panel > Localization. Locales are automatically added to the locale switcher when publishing is enabled. Learn more about publishing locales.
Configure the dropdown toggle text to show the active locale
Now that your dropdown contains a Locales list, you can configure the dropdown toggle so it shows the locale your visitor is currently viewing.
To show the active locale in the dropdown toggle:
Select the Text Block inside the Dropdown Toggle element that reads “Dropdown” by default
Open the Element settings panel
Click the “purple dot” icon next to the Text field
-
Under Current Locale, choose one of the following:
Locale (e.g., en-US)
Language (e.g., en)
Country (if set — e.g., US)
Display name (e.g., English (United States))
The dropdown toggle text will now update automatically based on the locale your visitor is viewing.
Add images to your locale switcher
If you’ve set display images for your locales (for example, flags), you can show those images in your locale switcher — both in the dropdown list and in the dropdown toggle for the active locale.
Show images in the locale list
To show an image next to each locale option in the dropdown list:
Select the Locale element inside your Locales list
Add an Image element
With the Image element selected, open the Element settings panel
Click the “purple dot” icon next to the Image field
Under Locales List Item, choose Locale Image
Style the image however you’d like
Each locale option in the dropdown list will now show its display image (for example, a flag) next to the locale name.
Show an image for the active locale in the dropdown toggle
To show an image for the active locale in the dropdown toggle:
Add an Image element inside the Dropdown Toggle
With the Image element selected, open the Element settings panel
Click the “purple dot” icon next to the Image field
Under Current Locale, choose Locale Image
Style the image however you’d like
The dropdown toggle will now show an image (for example, a flag) next to the active locale text.