Language Icon Toggle

About this Component

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.

Key Features

• 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

Customization

• 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

SEO-Friendly Multilingual Structure

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.

Important Note

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.