A compact language switcher that reveals a text-based selector when you click or hover the globe icon.
Each language links to its own page — no auto-translation, full control, and SEO-friendly by design.
Globe icon expands a text-based language selector on click or hover
Supports up to 5 languages (A & B always visible; C–E optional)
Choose between click or hover trigger
"Close on select" option available
Smooth expand/collapse and indicator slide animation
Link each language to its own page URL
Keyboard and screen reader accessible
Event callback for connecting with other components
Light mode / Dark mode colors configurable separately (auto-switches with data-framer-theme)
Globe size, gap, border width, and font adjustable from the property panel
30 language presets + custom language code input
This component does not dynamically switch text within a single page. Instead, each language is managed as a separate page, which makes it well-suited for:
Country- and language-specific SEO
Proper search engine indexing
Clear and scalable multilingual site structures
This approach is especially effective for SEO-conscious multilingual websites.
This component does not include any translation functionality.
It is designed purely as a toggle UI for switching between language-specific pages, not for translating content automatically.
Mikiko Niwa
