This component is a no-code language toggle for Framer, designed for easy integration into any website. The default setup supports English (UK) ⇄ French, enhanced with a smooth and responsive toggle animation.
Each language is paired with its corresponding flag, which is automatically displayed upon selection for clear and intuitive recognition. All flag assets are bundled directly within the component via the country-flag-icons package — no external image hosting or network requests are required at runtime.
By placing the toggle on your page and assigning each option to a different language page, users can switch between languages with a single click. No scripts or code are required—simply set page links for each language.
This component does not dynamically switch text within a single page. Instead, each language is managed as a separate page, making it well-suited for:
Country- and language-specific SEO
Proper search engine indexing
Clean and scalable multilingual site structures
This approach is especially effective for SEO-focused multilingual websites.
This component can be used in a variety of real-world scenarios, such as:
Language switching in headers or navigation
Simple page switching on landing pages (LPs)
Global SaaS websites
Product or service pages targeting international users
Two-language sites (e.g. English / French, English / German)
This structure is particularly practical for production-ready projects.
You can choose from 30 preset languages via the language selection dropdown in the properties panel, making it easy to switch display languages.
Examples:
EN ⇄ FR
EN ⇄ DE
JP ⇄ CN
Flags are automatically displayed based on the selected language. If your language is not listed, you can select “Custom” and manually enter a language code.Customization Options
Easily customize the component directly from the Framer properties panel:
Language A / B — Select languages from presets or enter custom codes
Link A / B — Assign destination URLs for each language
Show Text — Toggle language label visibility. Set to Hide for a minimal, flag-only design.
Flag Size — Adjust flag size (24–64px)
Track Color — Set the background color of the toggle
Border Color / Width — Customize border appearance
Text Color — Set color for inactive text
Active Text Color — Set color for the selected language
Font — Customize font family and weight
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 automatic content translation.
Mikiko Niwa
