Fil d'Ariane en route aérienne
Chaque niveau est un aéroport relié par des arcs de vol ; au clic, l'avion suit la route jusque-là et colore le tronçon parcouru.
Réglages
Code
<nav class="uvq12-fp" aria-label="Fil d'Ariane"><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>Accueil</span></a></li><li style="left:30.00%;top:55.38%"><a href="#" data-l="96.6"><i aria-hidden="true"></i><span>Destinations</span></a></li><li style="left:51.88%;top:72.31%"><a href="#" data-l="191.1"><i aria-hidden="true"></i><span>Europe</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>Lisbonne</span></a></li></ol></nav>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Un fil d'Ariane dessiné comme une carte de vols : chaque niveau est un aéroport sur une grille légère, relié aux autres par des arcs en pointillé comme les routes d'un magazine de compagnie aérienne. Un clic fait voler l'avion le long des courbes jusqu'au niveau choisi, en tournant à chaque arc, et la partie parcourue devient pleine. Pour les sites de voyage, boutiques et catalogues profonds.
La couleur principale règle la route et l'étiquette courante, la secondaire l'avion. Change les noms dans les données et garde-les courts, entre quatre et six niveaux, pour que les arcs restent lisibles.