Language Selector
Overview
The Avonni Language Selector component empowers your Experience Cloud sites with seamless multilingual capabilities, enabling visitors to switch between languages effortlessly.
Setting the Stage: Basic Configurations
Label
Customize the label displayed above the language selection menu.
Alternatively, toggle the "Use current language as a label" option to dynamically display the currently selected language as the label.
![](https://experiencecloud.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F2929066058-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FDL6JQuZArjJeQvX2ot4y%252Fuploads%252FfQoA5SuFjgSdQInI9EQC%252F2024-07-05_16-04-11.png%3Falt%3Dmedia%26token%3Da5874a43-fb1e-473a-b4a9-ccb78fde5b6f&width=768&dpr=4&quality=100&sign=ff8a895&sv=1)
Language Groups
Organize multiple languages into distinct columns using the Language Groups feature.
Ensure that the languages you select are active and available on your site.
![](https://experiencecloud.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F2929066058-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FDL6JQuZArjJeQvX2ot4y%252Fuploads%252FWw5aInrhSZNR5WZ1SWGt%252F2024-07-05_16-21-42.png%3Falt%3Dmedia%26token%3Daaf9940d-e73b-4c08-afc7-1cd036ac1816&width=768&dpr=4&quality=100&sign=2bf9182a&sv=1)
Visual Customization
Icon Name & Size
Choose a symbol representing language diversity (a globe, perhaps?) and adjust its size to fit your site's aesthetic.
Variant
Select a visual style (bare, bare-inverse, base, border, border-filled, etc.) that aligns with your site's aesthetics.
Menu Alignment
Select a visual style (bare, bare-inverse, base, border, border-filled, etc.) that aligns with your site's aesthetics.
Menu Behavior
Menu Trigger
Will your visitors click a button, hover over it, or focus on it to reveal the language options? Choose the most intuitive interaction for your audience.
Menu Nubbin
This little arrow is a subtle touch that points from the menu back to the component, like a directional sign.
Menu Title
Give your menu a clear title (e.g., "Choose Your Language") for clarity.
Helpful Hints and Accessibility
Tooltip
When users hover over the component, provide a brief explanation or instructions via a tooltip.
Hide Down Arrow
You can hide the down arrow icon typically associated with dropdowns if you prefer a cleaner look.
Stretch
This option allows the component to expand and fill its container, ensuring a polished look.
Disabled
Temporarily disable the language selection functionality when needed.
Horizontal Alignment
Control the horizontal alignment of the component within its container (left, center, right).
With the Avonni Language Selector, your Experience Cloud site becomes a welcoming hub for a global audience. Visitors can choose their preferred language effortlessly, ensuring a smooth and enjoyable journey through your content.
Last updated