Design a website language switcher, preview it live, and copy production-ready HTML, CSS, and JavaScript. Works with subdirectories, subdomains, or query parameters.
Live preview
<details class="alt-ls alt-ls--dropdown">
<summary aria-label="Change language">English<span class="alt-ls__chevron" aria-hidden="true"></span></summary>
<ul>
<li><a href="https://example.com/" hreflang="en" lang="en" data-lang="en" aria-current="true">English</a></li>
<li><a href="https://example.com/es/" hreflang="es" lang="es" data-lang="es">Español</a></li>
<li><a href="https://example.com/fr/" hreflang="fr" lang="fr" data-lang="fr">Français</a></li>
<li><a href="https://example.com/de/" hreflang="de" lang="de" data-lang="de">Deutsch</a></li>
</ul>
</details>/ Altified
Altified gives you a hosted language switcher plus translated pages, metadata, and hreflang, managed from one dashboard.
The generated markup uses real links with hreflang and lang attributes, marks the active language with aria-current, and keeps the dropdown keyboard friendly through the native details and summary elements.
Put the switcher where people expect it, usually the header or footer. Label languages in their own script, send visitors to the same page in the new language rather than the homepage, and never redirect people automatically based on browser language without a way back.
/ FAQ
Pick your languages and style, copy the HTML where the switcher should appear, add the CSS to your stylesheet, and include the JavaScript before the closing body tag if you enabled same-page switching or the select style.
Yes. The dropdown uses a native details element and the inline links are plain anchors, so both work without JavaScript. The script only keeps visitors on the equivalent page, and is required for the select style.
Usually not. Flags represent countries, not languages: Spanish is spoken in many countries and Switzerland has four languages. Native language names are clearer, which is why flags are off by default.
A visitor who doesn't read your current language can still find theirs. Someone looking for German recognizes Deutsch far more easily than the word for German in a language they don't speak.
It helps users and crawlers discover language versions through normal links, but it does not replace hreflang. Add the generated hreflang tags to each page's head so search engines understand which URLs are translations.
Yes. Choose subdirectories, subdomains, or a ?lang= parameter, and decide whether the default language has its own prefix. Links and the script follow that structure.
/ Related