Create a language selector

After your multilingual website is live, you might need to devise a method for your visitors to choose the suitable language for their preferences. Using the Languages list component, you can establish a language selector. This component operates akin to the Collection list component and showcases all languages that are available for publication.

You have the freedom to modify the appearance as desired, yet this guide will focus on devising a language selector dropdown in a navigation bar, with the dropdown content reflecting the current language.

Prior to commencing: Explore the Localization overview to get acquainted with Localization. Confirm that you’re working on your principal language while setting up the language selector (i.e., certify that you’ve selected your main language from the Language options dropdown). Integrate a navigation bar into your website and place a dropdown component within the navigation bar.

Steps to craft your language selector:

1. Launch the Navigation panel
2. Tap the arrow beside the dropdown component to reveal its child components
3. Visit Add panel > Advanced
4. Drop a Languages list component into your navigation bar 
5. Insert the dropdown component within the Languages wrapper component (you’re able to precisely move your component using the Navigation panel)
6. Position the Languages list inside the dropdownlist component 
7. Erase the dropdown link components
8. Select the text block component inside the dropdown toggle component
9. Access the Element settings panel > Text block settings
10. Tap the purple “dot” icon 
11. Opt for Language name 
12. Design your dropdown component and its subcomponents according to your preference

You also have an option to include an illustration in your language selector to present each language’s visual representation (e.g., icon or flag) alongside its name:

1. Visit Add panel > Media
2. Attach an image component inside the dropdown toggle component
3. Go to Element settings panel > Image settings
4. Click the purple “dot” icon
5. Select Language image
6. Personalize your image based on your preferences

Henceforth, your language selector dropdown will showcase all available languages that are Activated for publication under this subdirectory in Settings panel > Localization, and the dropdown content and image will align with the current language (e.g., “English (United States)”). Languages are automatically incorporated into the published Languages list and the language selector upon enabling publishing. Further insights on publishing languages can be found.