Migas de pan de línea de metro
Cada nivel es una estación de una línea de metro, con nombres inclinados y un cartel de “Estás aquí” que viaja al pulsar.
Ajustes
Código
<nav class="uvq12-mc" aria-label="Migas de pan"><div class="ln"><ol><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Inicio</span></a></li><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Tienda</span></a></li><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Hombre</span></a></li><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Zapatillas</span></a></li><li><a href="#" aria-current="page"><span class="st" aria-hidden="true"></span><span class="nm">Running</span></a></li></ol><p class="ah" aria-hidden="true"><b>L5</b><span>Estás aquí</span></p></div></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
Estas migas de pan dibujan la ruta como una línea de metro: cada nivel es una estación, los nombres se inclinan como en un plano de transporte y las estaciones posteriores a la actual quedan grises y discontinuas. Un cartel amarillo de “Estás aquí” viaja por la línea al pulsar. Usa una lista ordenada de enlaces con aria-current y vale para tiendas, documentación y carpetas profundas.
Elige el color de la línea con el principal y el del cartel con el secundario. Usa nombres cortos para que las etiquetas inclinadas se lean bien, y de cuatro a seis niveles para que el plano quede claro.