- Español
- English
- Deutsch
- Français
- Italiano
- Português
Language picker with flags
A button with a globe and language code that opens a list with flags; the code flips when it changes.
Settings
Code
<div class="uv-nlp"><button type="button" class="tg" aria-haspopup="listbox" aria-expanded="false" aria-label="Language"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.4 2.5 3.5 5.5 3.5 8.5s-1.1 6-3.5 8.5c-2.4-2.5-3.5-5.5-3.5-8.5s1.1-6 3.5-8.5z"/></svg><span class="cd"><b>ES</b></span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></button><ul role="listbox" tabindex="-1" aria-label="Language"><li role="option" data-c="es" aria-selected="true" tabindex="-1"><span class="fl" aria-hidden="true">🇪🇸</span>Español<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li><li role="option" data-c="en" aria-selected="false" tabindex="-1"><span class="fl" aria-hidden="true">🇬🇧</span>English<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li><li role="option" data-c="de" aria-selected="false" tabindex="-1"><span class="fl" aria-hidden="true">🇩🇪</span>Deutsch<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li><li role="option" data-c="fr" aria-selected="false" tabindex="-1"><span class="fl" aria-hidden="true">🇫🇷</span>Français<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li><li role="option" data-c="it" aria-selected="false" tabindex="-1"><span class="fl" aria-hidden="true">🇮🇹</span>Italiano<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li><li role="option" data-c="pt" aria-selected="false" tabindex="-1"><span class="fl" aria-hidden="true">🇵🇹</span>Português<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li></ul></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Navigation
See all NavigationWhere to use it
Multilingual sites need a language switch that is easy to find and quick to use. This compact button shows a globe and the current code; it opens a list of languages written in their own names with a flag, marks the current one with a tick and a tinted row, and flips the code on the button with a small 3D turn after choosing.
It behaves like a proper listbox: arrow keys move through options, Enter selects, Escape closes and focus returns to the button. Add or remove languages in the data and link each one to its localized URL in your router.