Pestañas de navegador
Pestañas que se activan, se cierran encogiéndose y se abren con el botón +, como en un navegador.
Ajustes
Código
<div class="uv-nbr"><div class="st" role="tablist" aria-label="Pestañas"><div class="tb" style="--f:#ef4444"><button type="button" role="tab" aria-selected="false" class="lb"><i></i><span>Correo</span></button><button type="button" class="x" aria-label="Cerrar Correo"><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 7l10 10M17 7L7 17"/></svg></button></div><div class="tb on" style="--f:#3b82f6"><button type="button" role="tab" aria-selected="true" class="lb"><i></i><span>Calendario</span></button><button type="button" class="x" aria-label="Cerrar Calendario"><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 7l10 10M17 7L7 17"/></svg></button></div><div class="tb" style="--f:#a855f7"><button type="button" role="tab" aria-selected="false" class="lb"><i></i><span>Diseño final</span></button><button type="button" class="x" aria-label="Cerrar Diseño final"><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 7l10 10M17 7L7 17"/></svg></button></div><button type="button" class="ad" aria-label="Nueva pestaña"><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="M12 5v14M5 12h14"/></svg></button></div><div class="tl"><span class="ur"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg><span class="u">calendario.app</span></span></div></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 apps de trabajo, los editores y los paneles usan cada vez más pestañas al estilo del navegador para tener varios documentos abiertos. La pestaña activa se funde con la barra de direcciones con esquinas curvas, las inactivas se aclaran al pasar el ratón, el botón de cerrar encoge la pestaña hasta quitarla y activa la vecina, y el botón + mete una pestaña nueva y la selecciona.
Las pestañas reparten el ancho y recortan los títulos largos con puntos suspensivos, y la barra enseña la dirección de la activa. Usan el rol tab con aria-selected y en la demo caben hasta cinco a la vez.