Components

Language Switcher

Switch Languages Seamlessly, Automatically

The Language Switcher component lets your users navigate effortlessly between different languages in your multilingual project. It handles everything from switching URL slugs to redirecting users to the correct localized version of your content, without additional setup.

Customizable and dynamic, it ensures an intuitive user experience while supporting international SEO and content reach. Whether you want to display a simple dropdown or a branded selector, the Language Switcher adapts to your design needs.

Seamless Multilingual UX

  1. Automatic Locale Switching.
    Redirect users to the correct translated page.

  2. Show language names, codes, and more.
    Adapt to your brand or regional preferences.

  3. Dropdown state is always visible.
    Active language is clearly highlighted.

Full Customization Control

  1. Hover or Click-Based Modes.
    Adapts to your design flow and user behavior.

  2. Theming for Every Part.
    Easily match your project’s aesthetic.

  3. Translation-Safe Defaults.
    Fallbacks ensure all states behave smoothly.

Use Cases

  • Multi-language websites offering regional content.

  • Marketing websites in need of a branded and styled locale switch

  • SaaS platforms or apps supporting global audiences

  • SEO-focused projects that rely on localized content and proper slug resolution

The Language Switcher ensures that localization feels native, functional, and completely intuitive for end users, while editors and developers benefit from automatic handling and flexibility.

Configuration Options & Features

The Language Switcher gives you a powerful yet effortless solution for managing language navigation. It automatically adapts to your routing, enhances the user experience, supports branding flexibility, and ensures smooth internationalization, all with complete styling control and best-practice logic built in.

Trigger

The visual element that initiates the dropdown.

If left empty, the component displays the currently active language or the Element Descriptor for that language.

Indicator

A visual icon or symbol (e.g., chevron) that rotates 180° based on the dropdown state.

Provides users with clear visual feedback on interactions.

Element Descriptors

An optional field to define custom content for each language (e.g., “EN”, “DE”, “Français”, flags, or brand styles).

Overrides the default language label display for improved branding and user experience.

Open on Hover

When enabled, the dropdown menu opens when the user hovers over the trigger.

When disabled, the menu opens only on click.

Ideal for adapting to header menu UX patterns.

Open to Direction

Defines whether the dropdown content opens upward or downward from the trigger.

Useful for headers, footers, or space-limited areas.

Component Theme

Applies styling to the wrapper of the entire Language Switcher.

Use for spacing, borders, or background styling.

Trigger Theme

Controls the styling of the trigger element.

Apply hover states, borders, or color schemes here.

Content Theme

Defines the theme for the dropdown container.

This affects the styling of the expanded list of language options.

Element Theme

Applies to each language option in the list.

Use to control spacing, padding, hover effects, and more.

Inactive Element Theme

Used to style inactive or disabled language options.

For instance, if a page isn’t available in a specific language or the current language matches the option.