- Español
- English
- Deutsch
- Français
- Italiano
- Português
HTML + CSSNavegación
Selector de idioma con banderas
Un botón con globo y código de idioma que abre una lista con banderas; el código gira al cambiar.
Ajustes
16px
1x
Código
<div class="uv-nlp"><button type="button" class="tg" aria-haspopup="listbox" aria-expanded="false" aria-label="Idioma"><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="Idioma"><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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Navegación
Ver todos: NavegaciónDónde usarlo
Las webs multilingües necesitan un cambio de idioma fácil de encontrar y rápido. Este botón compacto muestra un globo y el código actual; abre una lista de idiomas escritos en su propia lengua con bandera, marca el actual con un check y una fila tintada y, tras elegir, el código del botón gira con un pequeño efecto 3D.
Se comporta como un listbox de verdad: las flechas recorren las opciones, Intro elige, Escape cierra y el foco vuelve al botón. Añade o quita idiomas en los datos y enlaza cada uno con su URL traducida en tu router.