About Language Switcher
This is the first-ever Framer custom locale selector you can fully customize without any styling limits.
Language Switcher is a fully customizable locale selector built using Framer’s native tools and localization system - no code component required. It lets you add a clean, flexible language dropdown to your multilingual Framer sites with full visual control.
This component works directly with Framer Localization and supports multiple languages, flags, and style controls through the right-side property panel. It works as a flexible language picker, translation toggle, and locale switcher that helps you build professional multilingual websites with strong language SEO and multilingual SEO benefits.
⚠️ Important:
This component works only with Framer's native localization feature.
On Framer's free plan, you can translate into only one language (like the above demo).
On paid plans, the number of supported languages depends on your plan.
Setup is extremely easy:
Step 1: Enable Localization
Make sure Localization is enabled in your Framer project.- Don’t know how to set up localization?
👉 Watch Framer’s official guide here: [video link]
Step 2: Add & Unlink the Component
Paste the Language Switcher onto your canvas.Double-click it and choose Unlink and Replace.
Select the Dropdown Button frame from the layer panel (left panel).
In the right panel → Interactions, map each locale to its corresponding language/locale.
Step 3: Map Variants with Transform
Return to the main canvas.- In the properties panel, use the Transform control next to Variant Label and map the same languages/locales there as well.
For additional clarity, a step-by-step walkthrough video is included in the component guide and will be available after purchase.
Instructions
Getting Started
Enable Localization in Framer: Make sure Localization is turned on in your project settings and your locales are created.
Add the Component: Copy and paste the Language Switcher component into your Framer project.
Important: If the language dropdown is not visible on click or hover, make sure: all parent layers/containers have overflow set to visible and No parent layer is using a mask effect
Unlink the Component: Double-click the component and select Unlink and Replace so you can map locales and interactions.
Map Locale Interactions: Select the Dropdown Button frame from the layer panel. In the right sidebar → Interactions, map each language/locale to its corresponding locale.
Map Variant Transform: Go back to the main canvas and use the Transform control next to Variant Label to map the same languages/locales there as well.
Customize Appearance: Use the right-side property controls to customize all styling.
Add Flags (Optional): Upload flag images for each language item.
Preview & Publish: Test in Preview mode, then publish your site - the language switcher works in both preview and live environments.
-------------------
Want an easier setup?
Get the Language Switcher Bundle (Native + Pro).
If you prefer a faster, plug-and-play experience, the Pro version is available as a code component.
Unlike this native version, the Pro version requires no manual locale mapping — simply drag and drop the component into your project and it works instantly.
-------------------
How It Works
The Language Switcher provides 9 main control sections with native designing in Framer, giving you fine control over your language changer, translation switcher, and locale picker.
Properties Control
Button & dropdown background colors
Font color and sizes
Arrow color
Hover and active item styles
Button and item padding
Optional flags for each language
Up to 4 language items
First item flag option
Variant transform mapping for locales
No styling limitations - everything is adjustable visually.
Key Features
Fully responsive across layouts
Production ready, works out of the box
Glassmorphism effects
Custom flag support for flexible language options
Smooth Framer Motion animations
Anti-flicker hover behavior
Canvas styling mode
Flexible dropdown alignment
Hover state control
No external dependencies
50+ style properties
Click-outside close behavior
Use Cases
Multilingual Websites - E-commerce stores serving global customers
Corporate Sites - Companies with international presence
Documentation Portals - Technical docs in multiple languages
Educational Platforms - Course content for diverse audiences
Travel & Hospitality - Hotels, booking sites, tour operators
SaaS Applications - Software serving worldwide markets
Portfolio Sites - Designers/agencies showcasing work globally
News & Media - Publishing content in multiple languages
Restaurant Websites - Menus for international tourists
Gaming Communities - Forums and communities for global players
Business Directories - Listings accessible in multiple languages
Mobile-First Apps - Responsive web apps with locale support
Government Portals - Public services for diverse populations
Event Websites - Conferences with international attendees
Healthcare Sites - Medical information in patient languages
📌 Notes
Syncs with your Framer localization setup
Works in preview and live publish
Native component - no overrides or code needed
Made with ❤️ by Soyeb
© 2026 Soyeb. All rights reserved.
Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.
Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com
