Barra que guarda enlaces en «Más»
Cuando falta ancho, los últimos enlaces pasan a un menú «Más» con contador; arrastra el asa o cambia el ancho para verlo.
Ajustes
Código
<div class="uvq12-pp"><nav aria-label="Principal"><a class="lg" href="#"><i aria-hidden="true"></i>Norte</a><ul class="ls"><li><a href="#" aria-current="page">Inicio</a></li><li><a href="#">Producto</a></li><li><a href="#">Precios</a></li><li><a href="#">Clientes</a></li><li><a href="#">Blog</a></li><li><a href="#">Docs</a></li><li><a href="#">Empleo</a></li><li><a href="#">Contacto</a></li></ul><div class="mr"><button type="button" aria-expanded="false" aria-controls="uvq12-pp-m"><span>Más</span><b>0</b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></button><ul class="mm" id="uvq12-pp-m"><li><a href="#" aria-current="page">Inicio</a></li><li><a href="#">Producto</a></li><li><a href="#">Precios</a></li><li><a href="#">Clientes</a></li><li><a href="#">Blog</a></li><li><a href="#">Docs</a></li><li><a href="#">Empleo</a></li><li><a href="#">Contacto</a></li></ul></div><span class="hd" aria-hidden="true"></span></nav></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
El patrón de prioridad para menús adaptables: los enlaces se quedan en la barra mientras caben, y los que no pasan a un desplegable «Más» con un contador que da un salto en cada cambio. Un ResizeObserver recalcula con cualquier ancho, así que funciona en barras laterales, tarjetas y cabeceras reales. La página actual se marca en ambos sitios y el menú responde a flechas y Escape.
Usa el control de ancho o arrastra el asa para probarlo, y elige el color principal y el secundario para el enlace activo. Ordena los enlaces por importancia, porque los últimos son los primeros en moverse.