Language Switcher HTML Generator
Generate accessible language-switcher HTML + CSS — dropdown, inline, or flags.
Style
Languages
Live preview
🌐 Language
- 🇬🇧 English
- 🇩🇪 Deutsch
- 🇫🇷 Français
- 🇪🇸 Español
<nav class="lang-switcher" aria-label="Language">
<details>
<summary>🌐 Language</summary>
<ul>
<li><a href="/en/" hreflang="en">🇬🇧 English</a></li>
<li><a href="/de/" hreflang="de">🇩🇪 Deutsch</a></li>
<li><a href="/fr/" hreflang="fr">🇫🇷 Français</a></li>
<li><a href="/es/" hreflang="es">🇪🇸 Español</a></li>
</ul>
</details>
</nav>
<style>
.lang-switcher details { position: relative; display: inline-block; }
.lang-switcher summary { cursor: pointer; list-style: none; padding: .5rem .75rem; }
.lang-switcher ul { position: absolute; margin: 0; padding: .25rem; list-style: none;
background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.lang-switcher a { display: block; padding: .4rem .75rem; border-radius: 6px; text-decoration: none; color: #0b1b2b; white-space: nowrap; }
.lang-switcher a:hover { background: #f0f6fc; }
</style>What makes a good language switcher
A language switcher lets visitors move between the versions of your site. It sounds trivial, but a few details matter for usability and SEO:
- Use real links to each language URL (not JavaScript-only), so search engines can follow them.
- Add
hreflangon each link to reinforce the language relationship. - Label languages in their own language — “Deutsch,” not “German” — so speakers recognize their option.
- Don't rely on flags alone — flags represent countries, not languages (which flag for English?). Use them as accents, with text.
Dropdown, inline, or flags?
Use inline linkswhen you have two or three languages — they're the most discoverable. Switch to a dropdown once the list grows so it doesn't crowd your header. The flags style is compact but least accessible; pair it with aria-labels (this generator does).
Accessibility built in
The generated markup wraps the switcher in a <nav aria-label="Language">, uses a native <details> element for the dropdown (keyboard-friendly, no JavaScript), and adds labels for the flag variant.
Or skip the markup entirely
Gloty includes a configurable language switcher out of the box — as a floating widget, a shortcode, or a Gutenberg block — with flags, positioning, and styles that match your theme. Pair it with a correct hreflang setup.
Gloty ships a ready-made language switcher — floating widget, shortcode, or Gutenberg block — so you don't hand-build one.