Migas de pan de ruta de vuelo
Cada nivel es un aeropuerto unido por arcos de vuelo; al pulsarlo, el avión vuela hasta allí y pinta el tramo recorrido.
Ajustes
Código
<nav class="uvq12-fp" aria-label="Migas de pan"><svg viewBox="0 0 320 130" aria-hidden="true"><path class="b" d="M26 98 Q61 28 96 72 Q131 28 166 94 Q201 16 236 60 Q267 16 298 84"/><path class="f" d="M26 98 Q61 28 96 72 Q131 28 166 94 Q201 16 236 60 Q267 16 298 84" style="stroke-dasharray:381.6 9999"/><g class="pl" transform="translate(298 84) rotate(110)"><circle r="16" class="sh"/><path transform="scale(1.15) translate(-12 -12)" d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z"/></g></svg><ol><li style="left:8.13%;top:75.38%"><a href="#" data-l="0"><i aria-hidden="true"></i><span>Inicio</span></a></li><li style="left:30.00%;top:55.38%"><a href="#" data-l="96.6"><i aria-hidden="true"></i><span>Destinos</span></a></li><li style="left:51.88%;top:72.31%"><a href="#" data-l="191.1"><i aria-hidden="true"></i><span>Europa</span></a></li><li style="left:73.75%;top:46.15%"><a href="#" data-l="292.1"><i aria-hidden="true"></i><span>Portugal</span></a></li><li style="left:93.13%;top:64.62%"><a href="#" data-l="381.6" aria-current="page"><i aria-hidden="true"></i><span>Lisboa</span></a></li></ol></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
Unas migas de pan dibujadas como un mapa de vuelos: cada nivel es un aeropuerto sobre una cuadrícula suave, unido a los demás por arcos discontinuos como las rutas de una revista de aerolínea. Al pulsar un nivel, el avión vuela por las curvas hasta él, girando en cada arco, y el tramo recorrido pasa a ser continuo. Encaja en webs de viajes, tiendas y catálogos profundos.
El color principal marca la ruta y la etiqueta actual, y el secundario el avión. Cambia los nombres en los datos y déjalos cortos, entre cuatro y seis niveles, para que los arcos se lean bien.