Tailwind Css
Breadcrumb
Fil D Ariane
Navigation
Dark Mode
Svg
Hover
Responsive
Html
Snippet
Fil d'Ariane Tailwind CSS avec séparateurs SVG, hover effects, support dark mode intégré et styles utility-first pour navigation hiérarchique.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Breadcrumbtrail Tailwindcss 2026 05011632 | AngularForAll</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Configuration Tailwind -->
<script>
tailwind.config = {
theme: {
extend: {
animation: {
'slide-in': 'slideIn 0.5s ease-out forwards',
'fade-in': 'fadeIn 0.4s ease-out',
},
keyframes: {
slideIn: {
'0%': { opacity: '0', transform: 'translateX(-20px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
}
}
}
}
}
</script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Header simple -->
<nav class="bg-gray-900 text-white">
<div class="max-w-7xl mx-auto px-4 py-4">
<div class="flex items-center space-x-2">
<i class="fas fa-store text-purple-400 text-xl"></i>
<span class="text-xl font-bold">Shop<span class="text-purple-400">Breadcrumb</span></span>
</div>
</div>
</nav>
<!-- Conteneur principal -->
<div class="max-w-7xl mx-auto px-4 py-8">
<!-- Titre de démonstration -->
<div class="flex items-center space-x-3 mb-8">
<i class="fas fa-signpost text-3xl text-purple-600"></i>
<div>
<h2 class="text-2xl font-bold text-gray-900">Breadcrumb Trail</h2>
<p class="text-gray-500">Fil d'Ariane dynamique et personnalisable</p>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 1 : Chevrons simples -->
<!-- ============================================================ -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-6 overflow-hidden">
<div class="border-b border-gray-100 px-6 py-4">
<h5 class="text-lg font-semibold text-gray-900 flex items-center">
<i class="fas fa-chevron-right text-purple-500 mr-2"></i>
Variante 1 : Style Chevrons Simple
</h5>
</div>
<div class="p-6">
<nav aria-label="Breadcrumb chevrons">
<ol class="flex items-center flex-wrap space-x-2 text-sm">
<!-- Étape 1 -->
<li class="flex items-center animate-slide-in" style="animation-delay: 0.1s">
<a href="#" class="text-gray-500 hover:text-purple-600 transition-colors duration-200 flex items-center">
<i class="fas fa-home mr-1"></i>
Accueil
</a>
<span class="mx-2 text-gray-300">/</span>
</li>
<!-- Étape 2 -->
<li class="flex items-center animate-slide-in" style="animation-delay: 0.2s">
<a href="#" class="text-gray-500 hover:text-purple-600 transition-colors duration-200">
Produits
</a>
<span class="mx-2 text-gray-300">/</span>
</li>
<!-- Étape 3 -->
<li class="flex items-center animate-slide-in" style="animation-delay: 0.3s">
<a href="#" class="text-gray-500 hover:text-purple-600 transition-colors duration-200">
Électronique
</a>
<span class="mx-2 text-gray-300">/</span>
</li>
<!-- Étape 4 -->
<li class="flex items-center animate-slide-in" style="animation-delay: 0.4s">
<a href="#" class="text-gray-500 hover:text-purple-600 transition-colors duration-200">
Smartphones
</a>
<span class="mx-2 text-gray-300">/</span>
</li>
<!-- Étape 5 (Active) -->
<li class="flex items-center animate-slide-in" style="animation-delay: 0.5s" aria-current="page">
<span class="text-purple-600 font-semibold">iPhone 15 Pro Max</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 2 : Flèches directionnelles -->
<!-- ============================================================ -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-6 overflow-hidden">
<div class="border-b border-gray-100 px-6 py-4">
<h5 class="text-lg font-semibold text-gray-900 flex items-center">
<i class="fas fa-arrow-right text-blue-500 mr-2"></i>
Variante 2 : Style Flèches
</h5>
</div>
<div class="p-6">
<nav aria-label="Breadcrumb flèches">
<ol class="flex items-center flex-wrap space-x-3 text-sm">
<li class="flex items-center animate-slide-in" style="animation-delay: 0.1s">
<a href="#" class="text-blue-500 hover:text-blue-700 transition-colors duration-200 flex items-center font-medium">
<i class="fas fa-home mr-1"></i>
Accueil
</a>
<i class="fas fa-arrow-right text-blue-300 mx-2 text-xs"></i>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.2s">
<a href="#" class="text-blue-500 hover:text-blue-700 transition-colors duration-200 font-medium">
Mode
</a>
<i class="fas fa-arrow-right text-blue-300 mx-2 text-xs"></i>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.3s">
<a href="#" class="text-blue-500 hover:text-blue-700 transition-colors duration-200 font-medium">
Homme
</a>
<i class="fas fa-arrow-right text-blue-300 mx-2 text-xs"></i>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.4s">
<a href="#" class="text-blue-500 hover:text-blue-700 transition-colors duration-200 font-medium">
Vestes
</a>
<i class="fas fa-arrow-right text-blue-300 mx-2 text-xs"></i>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.5s" aria-current="page">
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-semibold">
Veste en Cuir Premium
</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 3 : Pills badges -->
<!-- ============================================================ -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-6 overflow-hidden">
<div class="border-b border-gray-100 px-6 py-4">
<h5 class="text-lg font-semibold text-gray-900 flex items-center">
<i class="fas fa-puzzle-piece text-emerald-500 mr-2"></i>
Variante 3 : Style Pills / Badges
</h5>
</div>
<div class="p-6">
<nav aria-label="Breadcrumb pills">
<ol class="flex items-center flex-wrap gap-2">
<li class="animate-slide-in" style="animation-delay: 0.1s">
<a href="#" class="inline-flex items-center px-4 py-2 bg-purple-100 text-purple-700 rounded-full hover:bg-purple-200 transition-all duration-200 text-sm font-medium">
<i class="fas fa-home mr-1"></i>
Accueil
</a>
<span class="text-gray-300 mx-1">→</span>
</li>
<li class="animate-slide-in" style="animation-delay: 0.2s">
<a href="#" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-all duration-200 text-sm font-medium">
Gaming
</a>
<span class="text-gray-300 mx-1">→</span>
</li>
<li class="animate-slide-in" style="animation-delay: 0.3s">
<a href="#" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-all duration-200 text-sm font-medium">
Consoles
</a>
<span class="text-gray-300 mx-1">→</span>
</li>
<li class="animate-slide-in" style="animation-delay: 0.4s" aria-current="page">
<span class="inline-flex items-center px-4 py-2 bg-emerald-500 text-white rounded-full text-sm font-semibold shadow-sm">
<i class="fas fa-check-circle mr-1"></i>
PlayStation 5
</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 4 : Slashes double -->
<!-- ============================================================ -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-6 overflow-hidden">
<div class="border-b border-gray-100 px-6 py-4">
<h5 class="text-lg font-semibold text-gray-900 flex items-center">
<i class="fas fa-slash text-orange-500 mr-2"></i>
Variante 4 : Style Double Slash
</h5>
</div>
<div class="p-6">
<nav aria-label="Breadcrumb slashes">
<ol class="flex items-center flex-wrap text-sm">
<li class="flex items-center animate-slide-in" style="animation-delay: 0.1s">
<a href="#" class="text-orange-500 hover:text-orange-700 transition-colors duration-200 flex items-center font-medium">
<i class="fas fa-home mr-1"></i>
Accueil
</a>
<span class="text-orange-300 font-bold mx-2">//</span>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.2s">
<a href="#" class="text-orange-500 hover:text-orange-700 transition-colors duration-200 font-medium">
Maison
</a>
<span class="text-orange-300 font-bold mx-2">//</span>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.3s">
<a href="#" class="text-orange-500 hover:text-orange-700 transition-colors duration-200 font-medium">
Décoration
</a>
<span class="text-orange-300 font-bold mx-2">//</span>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.4s" aria-current="page">
<span class="text-orange-800 font-bold border-b-2 border-orange-500 pb-0.5">
Lampe Design Scandinave
</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 5 : Avec icônes personnalisées -->
<!-- ============================================================ -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-6 overflow-hidden">
<div class="border-b border-gray-100 px-6 py-4">
<h5 class="text-lg font-semibold text-gray-900 flex items-center">
<i class="fas fa-icons text-pink-500 mr-2"></i>
Variante 5 : Icônes Personnalisées par Étape
</h5>
</div>
<div class="p-6">
<nav aria-label="Breadcrumb icônes">
<ol class="flex items-center flex-wrap space-x-1 text-sm">
<li class="flex items-center animate-slide-in" style="animation-delay: 0.1s">
<a href="#" class="flex items-center px-3 py-2 text-gray-600 hover:text-pink-600 hover:bg-pink-50 rounded-lg transition-all duration-200">
<i class="fas fa-home text-pink-500 mr-2"></i>
Accueil
</a>
<i class="fas fa-chevron-right text-gray-300 text-xs mx-1"></i>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.2s">
<a href="#" class="flex items-center px-3 py-2 text-gray-600 hover:text-pink-600 hover:bg-pink-50 rounded-lg transition-all duration-200">
<i class="fas fa-th-large text-purple-500 mr-2"></i>
Catégories
</a>
<i class="fas fa-chevron-right text-gray-300 text-xs mx-1"></i>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.3s">
<a href="#" class="flex items-center px-3 py-2 text-gray-600 hover:text-pink-600 hover:bg-pink-50 rounded-lg transition-all duration-200">
<i class="fas fa-tag text-amber-500 mr-2"></i>
Promotions
</a>
<i class="fas fa-chevron-right text-gray-300 text-xs mx-1"></i>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.4s" aria-current="page">
<span class="flex items-center px-3 py-2 bg-pink-50 text-pink-700 rounded-lg font-semibold border border-pink-200">
<i class="fas fa-star text-pink-500 mr-2"></i>
Offre Spéciale
</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 6 : Compact minimaliste -->
<!-- ============================================================ -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-6 overflow-hidden">
<div class="border-b border-gray-100 px-6 py-4">
<h5 class="text-lg font-semibold text-gray-900 flex items-center">
<i class="fas fa-minus text-gray-500 mr-2"></i>
Variante 6 : Style Minimaliste
</h5>
</div>
<div class="p-6">
<nav aria-label="Breadcrumb minimal">
<ol class="flex items-center flex-wrap space-x-1 text-xs uppercase tracking-wider font-medium">
<li class="flex items-center animate-slide-in" style="animation-delay: 0.1s">
<a href="#" class="text-gray-400 hover:text-gray-900 transition-colors duration-200">
Accueil
</a>
<span class="text-gray-300 mx-2">·</span>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.2s">
<a href="#" class="text-gray-400 hover:text-gray-900 transition-colors duration-200">
Collections
</a>
<span class="text-gray-300 mx-2">·</span>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.3s">
<a href="#" class="text-gray-400 hover:text-gray-900 transition-colors duration-200">
Été 2024
</a>
<span class="text-gray-300 mx-2">·</span>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.4s" aria-current="page">
<span class="text-gray-900 font-bold">
Collection Capsule
</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 7 : Avec background -->
<!-- ============================================================ -->
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-2xl shadow-lg mb-6 overflow-hidden">
<div class="px-6 py-5">
<nav aria-label="Breadcrumb gradient">
<ol class="flex items-center flex-wrap space-x-2 text-sm">
<li class="flex items-center animate-slide-in" style="animation-delay: 0.1s">
<a href="#" class="text-white/80 hover:text-white transition-colors duration-200 flex items-center">
<i class="fas fa-home mr-1"></i>
Accueil
</a>
<i class="fas fa-chevron-right text-white/40 mx-2 text-xs"></i>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.2s">
<a href="#" class="text-white/80 hover:text-white transition-colors duration-200">
Produits
</a>
<i class="fas fa-chevron-right text-white/40 mx-2 text-xs"></i>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.3s">
<a href="#" class="text-white/80 hover:text-white transition-colors duration-200">
Tech
</a>
<i class="fas fa-chevron-right text-white/40 mx-2 text-xs"></i>
</li>
<li class="flex items-center animate-slide-in" style="animation-delay: 0.4s" aria-current="page">
<span class="text-white font-bold bg-white/20 px-3 py-1 rounded-full backdrop-blur-sm">
MacBook Pro M3
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- Script pour les interactions -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Ajouter des effets de clic sur tous les liens breadcrumb
document.querySelectorAll('nav[aria-label] a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
// Effet de scale au clic
this.style.transform = 'scale(0.95)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 150);
// Feedback console (démo)
console.log('Navigation vers:', this.textContent.trim());
});
});
// Désactiver le clic sur les éléments actifs
document.querySelectorAll('[aria-current="page"]').forEach(item => {
item.style.cursor = 'default';
});
});
</script>
</body>
</html>Télécharger le fichier source