Barra inferior con muesca
La pestaña activa sube a una burbuja flotante y la barra se recorta debajo con una muesca que la sigue.
Ajustes
Código
<nav class="uv-nnb" aria-label="Navegación"><div class="br"></div><span class="bu" aria-hidden="true"></span><label><input type="radio" name="uv-nnb" checked><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11l8-6.5 8 6.5V20h-5v-5.5h-6V20H4z"/></svg></span><span class="tx">Inicio</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg></span><span class="tx">Buscar</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span><span class="tx">Crear</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg></span><span class="tx">Mensajes</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8.5" r="3.8"/><path d="M4.5 20c.8-3.8 3.9-6 7.5-6s6.7 2.2 7.5 6"/></svg></span><span class="tx">Perfil</span></label></nav>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 barras de pestañas con muesca encantan en los conceptos de apps móviles porque la sección activa destaca literalmente. Al elegir una pestaña, una burbuja de color se desliza por el borde superior con un muelle, el icono sube a ella en blanco y un recorte circular se mueve en la barra para que la burbuja siempre tenga su hueco, mientras la etiqueta toma el color de acento.
La muesca es una máscara CSS controlada por una propiedad registrada y las pestañas son radios, así que la barra funciona sin JavaScript y con las flechas del teclado. Cambia iconos y textos, mantén cinco elementos o menos y elige un color principal fuerte para la burbuja.