Fil d'Ariane en ligne de métro
Chaque niveau devient une station de métro, avec des noms inclinés et un panneau « Vous êtes ici » qui se déplace au clic.
Réglages
Code
<nav class="uvq12-mc" aria-label="Fil d'Ariane"><div class="ln"><ol><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Accueil</span></a></li><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Boutique</span></a></li><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Homme</span></a></li><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Baskets</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>Vous êtes ici</span></p></div></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
Ce fil d'Ariane dessine le chemin comme une ligne de métro : chaque niveau est une station, les noms penchent comme sur un plan et les stations après la position actuelle passent en gris pointillé. Un panneau jaune « Vous êtes ici » glisse le long de la ligne au clic. C'est une vraie liste ordonnée de liens avec aria-current, utile pour boutiques, documentation et dossiers profonds.
Choisis la couleur de la ligne avec la principale et celle du panneau avec la secondaire. Garde des noms courts pour que les étiquettes inclinées restent lisibles, et vise quatre à six niveaux.