Breadcrumb Animated
Fil d'Ariane CSS pur : les chevrons SVG pulsent à l'opacité et glissent de 3 px quand l'item précédent est survolé — keyframe chevronPulse + sélecteur adjacent, zéro JS.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet est entièrement piloté par CSS, sans une seule ligne de JavaScript. Le <nav class="breadcrumb-animated"> sert de scope de déclenchement : dès qu'un pointeur entre dans le nav, la règle .breadcrumb-animated:hover .breadcrumb-chevron s'active et lance l'animation chevronPulse sur tous les chevrons simultanément.
@keyframes chevronPulse fait osciller l'opacité de 0,5 à 1 (50 % → 100 % → 50 %) en 1,5 s ease-in-out infini. Ce battement attire l'œil vers la structure hiérarchique sans distraire de la lecture — il s'arrête dès que le pointeur quitte le nav.
Le sélecteur adjacent .breadcrumb-item:hover + .breadcrumb-chevron ajoute un second niveau d'interaction : le chevron immédiatement après l'item survolé glisse de 3 px vers la droite (translateX(3px)) et prend la teinte indigo #6366f1, en synchronie avec le fond de survol de l'item. Cet effet « pousse » visuellement la progression dans la hiérarchie.
Les propriétés personnalisées CSS (--text-secondary, --text-primary, --text-muted, --radius-sm, --space-1, --space-2) permettent de s'aligner sur n'importe quel design system en surchargeant les variables sur :root ou directement sur le .breadcrumb-animated.
Accessibilité
<nav>est un élément landmark HTML5 reconnu nativement par les lecteurs d'écran — ajoutezaria-label="Fil d'Ariane"si la page contient plusieurs<nav>.- Aucun
prefers-reduced-motionn'est implémenté : la pulsationchevronPulseet la transition de glissement s'exécutent quelle que soit la préférence système. À ajouter manuellement :@media (prefers-reduced-motion: reduce) { .breadcrumb-chevron { animation: none; transition: none } }. - L'item courant porte la classe
.currentmais pas d'attributaria-current="page"— à ajouter pour que les lecteurs d'écran annoncent la page active. - Les items sont des
<span>aveccursor: pointermais sans rôle ni gestionnaire clavier : pour une navigation clavier complète, remplacez-les par des<a href="…">. - Contraste texte inactif
#a1a1aasur fond#0a0a0f: ratio ≈ 4,8:1 (WCAG AA ✓) ; item courant#ffffff: ratio ≈ 21:1 (WCAG AAA ✓).
Compatibilité navigateur
Nécessite les transitions CSS, les keyframes et les propriétés personnalisées — supportés dans tous les navigateurs modernes depuis 2018.
Sans support des propriétés CSS personnalisées (IE 11 et antérieurs), les items s'affichent en gris par défaut — la structure reste lisible, sans animation.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<nav class="breadcrumb-animated" aria-label="Fil d'Ariane">
<span class="breadcrumb-item">Niveau 1</span>
<span class="breadcrumb-chevron">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 18l6-6-6-6"></path>
</svg>
</span>
<span class="breadcrumb-item">Niveau 2</span>
<span class="breadcrumb-chevron">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 18l6-6-6-6"></path>
</svg>
</span>
<span class="breadcrumb-item current">Page courante</span>
</nav>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --text-secondary | #a1a1aa | Couleur du texte des items inactifs. Remplacez par votre token `text-muted` ou `text-secondary` brand. |
| --text-primary | #ffffff | Couleur de l'item courant (classe `.current`). Adaptez à votre couleur de texte principale. |
| --text-muted | #8b8b93 | Couleur des chevrons au repos. Légèrement plus sombre que `--text-secondary` pour un contraste hiérarchique. |
| --radius-sm | 0.375rem | Arrondi du fond de survol des items. `0` pour un fond carré, `999px` pour des capsules pill. |
| --space-2 | 0.5rem | Padding horizontal de chaque item. Augmentez à `0.75rem` pour des items plus aérés sur les larges écrans. |
| Couleur accent hover | #6366f1 | Teinte indigo appliquée au fond de survol et aux chevrons actifs. Remplacez les deux occurrences de `#6366f1` dans `.breadcrumb-item:hover` et `.breadcrumb-item:hover + .breadcrumb-chevron` par votre couleur primaire. |
| Durée pulsation | 1.5s | Vitesse du battement des chevrons dans `animation: 1.5s ease-in-out infinite`. `0.8s` pour une pulsation vive, `3s` pour un rythme très doux. |
| Décalage chevron | 3px | Distance du glissement vers la droite du chevron adjacent lors du survol de l'item. Modifiez `translateX(3px)` dans `.breadcrumb-item:hover + .breadcrumb-chevron`. `0` pour désactiver, `6px` pour un effet plus prononcé. |
FAQ
@keyframes, des transitions CSS et le sélecteur adjacent +. Zéro dépendance, zéro JS à charger — compatible avec SSR, Astro, Hugo ou tout générateur statique sans client-side JS.<span class="breadcrumb-item">Niveau</span> + <span class="breadcrumb-chevron"><svg…></svg></span> avant l'item .current. Le sélecteur adjacent .breadcrumb-item:hover + .breadcrumb-chevron s'applique automatiquement au nouveau chevron.chevronPulse et les transitions CSS s'exécutent même quand l'OS signale une préférence pour réduire le mouvement. Pour y remédier, ajoutez : @media (prefers-reduced-motion: reduce) { .breadcrumb-chevron { animation: none; transition: none } }.
