A language toggle that connects directly to Framer's native Locale system. Place it once, enter your locale codes, and it works automatically across your entire site. Three customizable styles designed to fit any brand.
Overview
Locale Language Toggle is a code component that integrates seamlessly with Framer's native localization feature. This toggle uses Framer's built-in Locale API, automatically syncing with your existing locale setup. No configuration per page, no manual URL mapping — just one component that works everywhere.
Features
- Direct Framer Locale integration
- Automatic country flag display (80+ countries)
- Three styles: Glass, Solid, Floating
- Three display modes: Flag + Text, Flag Only, Text Only
- Full color customization
- Smooth spring animation
- Mobile responsive
- ARIA-compliant
How It Works
- Place the component on your page
- Enter your Locale A ID (e.g.,
en) - Enter your Locale B ID (e.g.,
es) - Done — the toggle syncs with Framer's active locale automatically
Requirements
Framer plan with Locales enabled (Basic or higher). Works with both manual translations and Auto Translate.
Setup Tip
For Glass and Floating styles, set the parent frame's Overflow to "Visible" so shadows display correctly.
