Material Design
Breadcrumb
Fil Dariane
Navigation
Ripple
Material Icons
Google
Responsive
Html
Snippet
Fil d'Ariane selon les guidelines Material Design avec ripple effect, icônes Material Icons, typographie MD et 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 Materiel Design 2026 05011630 | AngularForAll</title>
<!-- Material Design Lite CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-icons@latest/iconfont/material-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/material.indigo-pink.min.css">
<!-- Material Design Lite JS -->
<script defer src="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/material.min.js"></script>
<style>
/* ============================================================ */
/* Styles personnalisés pour les variantes de Breadcrumb */
/* ============================================================ */
.demo-container {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}
.breadcrumb-section {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);
margin-bottom: 24px;
overflow: hidden;
}
/* Variante 1 : Standard Material */
.breadcrumb-standard .mdl-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
padding: 16px 24px;
margin: 0;
}
.breadcrumb-standard .mdl-breadcrumb__item {
display: flex;
align-items: center;
animation: slideInRight 0.4s ease-out forwards;
opacity: 0;
}
.breadcrumb-standard .mdl-breadcrumb__item:nth-child(1) { animation-delay: 0.1s; }
.breadcrumb-standard .mdl-breadcrumb__item:nth-child(2) { animation-delay: 0.2s; }
.breadcrumb-standard .mdl-breadcrumb__item:nth-child(3) { animation-delay: 0.3s; }
.breadcrumb-standard .mdl-breadcrumb__item:nth-child(4) { animation-delay: 0.4s; }
.breadcrumb-standard .mdl-breadcrumb__item:nth-child(5) { animation-delay: 0.5s; }
.breadcrumb-standard .mdl-breadcrumb__link {
color: #757575;
text-decoration: none;
font-size: 14px;
font-weight: 400;
transition: color 0.2s ease;
display: flex;
align-items: center;
padding: 4px 8px;
border-radius: 4px;
}
.breadcrumb-standard .mdl-breadcrumb__link:hover {
color: #3f51b5;
background-color: rgba(63, 81, 181, 0.08);
}
.breadcrumb-standard .mdl-breadcrumb__separator {
color: #bdbdbd;
margin: 0 8px;
font-size: 20px;
user-select: none;
}
.breadcrumb-standard .mdl-breadcrumb__current {
color: #3f51b5;
font-weight: 500;
font-size: 14px;
padding: 4px 8px;
}
/* Variante 2 : Compact */
.breadcrumb-compact .mdl-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
padding: 12px 24px;
margin: 0;
}
.breadcrumb-compact .mdl-breadcrumb__link {
color: #616161;
text-decoration: none;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color 0.2s ease;
padding: 2px 6px;
border-radius: 2px;
}
.breadcrumb-compact .mdl-breadcrumb__link:hover {
color: #ff4081;
background-color: rgba(255, 64, 129, 0.08);
}
.breadcrumb-compact .mdl-breadcrumb__separator {
color: #e0e0e0;
margin: 0 4px;
font-size: 16px;
}
.breadcrumb-compact .mdl-breadcrumb__current {
color: #ff4081;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Variante 3 : Chips */
.breadcrumb-chips .mdl-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
padding: 16px 24px;
margin: 0;
gap: 4px;
}
.breadcrumb-chips .mdl-breadcrumb__chip {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
background-color: #e8eaf6;
color: #3f51b5;
border-radius: 16px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.breadcrumb-chips .mdl-breadcrumb__chip:hover {
background-color: #c5cae9;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
transform: translateY(-1px);
}
.breadcrumb-chips .mdl-breadcrumb__chip--active {
background-color: #3f51b5;
color: white;
font-weight: 600;
box-shadow: 0 2px 8px rgba(63, 81, 181, 0.4);
}
.breadcrumb-chips .mdl-breadcrumb__separator {
color: #bdbdbd;
margin: 0 2px;
font-size: 18px;
}
/* Variante 4 : Avec icônes */
.breadcrumb-icons .mdl-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
padding: 16px 24px;
margin: 0;
}
.breadcrumb-icons .mdl-breadcrumb__link {
color: #546e7a;
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
padding: 6px 12px;
border-radius: 4px;
transition: all 0.2s ease;
}
.breadcrumb-icons .mdl-breadcrumb__link:hover {
color: #00897b;
background-color: rgba(0, 137, 123, 0.08);
}
.breadcrumb-icons .mdl-breadcrumb__link .material-icons {
font-size: 18px;
margin-right: 6px;
}
.breadcrumb-icons .mdl-breadcrumb__separator {
color: #cfd8dc;
margin: 0 4px;
}
.breadcrumb-icons .mdl-breadcrumb__current {
display: flex;
align-items: center;
padding: 6px 12px;
color: #00897b;
font-weight: 600;
background-color: #e0f2f1;
border-radius: 4px;
}
.breadcrumb-icons .mdl-breadcrumb__current .material-icons {
font-size: 18px;
margin-right: 6px;
}
/* Variante 5 : FAB style */
.breadcrumb-fab .mdl-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
padding: 16px 24px;
margin: 0;
}
.breadcrumb-fab .mdl-breadcrumb__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 16px;
background-color: #f5f5f5;
color: #616161;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.breadcrumb-fab .mdl-breadcrumb__button:hover {
background-color: #eeeeee;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
.breadcrumb-fab .mdl-breadcrumb__button .material-icons {
font-size: 18px;
margin-right: 4px;
}
.breadcrumb-fab .mdl-breadcrumb__button--active {
background-color: #ff5722;
color: white;
box-shadow: 0 4px 8px rgba(255, 87, 34, 0.4);
}
.breadcrumb-fab .mdl-breadcrumb__separator {
color: #bdbdbd;
margin: 0 8px;
font-weight: 300;
}
/* Variante 6 : Dark theme */
.breadcrumb-dark {
background: #37474f;
}
.breadcrumb-dark .mdl-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
padding: 16px 24px;
margin: 0;
}
.breadcrumb-dark .mdl-breadcrumb__link {
color: #90a4ae;
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease;
padding: 4px 8px;
border-radius: 4px;
}
.breadcrumb-dark .mdl-breadcrumb__link:hover {
color: white;
background-color: rgba(255, 255, 255, 0.1);
}
.breadcrumb-dark .mdl-breadcrumb__separator {
color: #546e7a;
margin: 0 8px;
}
.breadcrumb-dark .mdl-breadcrumb__current {
color: #ffd54f;
font-weight: 500;
padding: 4px 8px;
}
/* Animations */
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes ripple {
0% { transform: scale(0); opacity: 1; }
100% { transform: scale(2); opacity: 0; }
}
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.ripple-effect:active::after {
width: 300px;
height: 300px;
}
/* En-tête de section */
.section-header {
display: flex;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid #e0e0e0;
background: #fafafa;
}
.section-header .material-icons {
font-size: 28px;
margin-right: 16px;
}
/* Responsive */
@media (max-width: 600px) {
.mdl-breadcrumb {
font-size: 12px;
}
.breadcrumb-chips .mdl-breadcrumb {
gap: 8px;
}
.breadcrumb-fab .mdl-breadcrumb__button {
min-width: 36px;
height: 36px;
padding: 0 12px;
font-size: 12px;
}
}
</style>
</head>
<body class="mdl-demo">
<!-- Layout principal Material Design -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Header -->
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">
<i class="material-icons" style="vertical-align: middle;">store</i>
ShopMaterial
</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Accueil</a>
<a class="mdl-navigation__link" href="#">Produits</a>
<a class="mdl-navigation__link" href="#">Contact</a>
</nav>
</div>
</header>
<!-- Drawer -->
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Menu</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Accueil</a>
<a class="mdl-navigation__link" href="#">Produits</a>
<a class="mdl-navigation__link" href="#">Catégories</a>
<a class="mdl-navigation__link" href="#">Contact</a>
</nav>
</div>
<!-- Contenu principal -->
<main class="mdl-layout__content">
<div class="demo-container">
<!-- Titre -->
<div style="text-align: center; margin-bottom: 32px;">
<h1 class="mdl-typography--display-1" style="color: #3f51b5; margin-bottom: 8px;">
<i class="material-icons" style="font-size: 48px; vertical-align: middle;">signpost</i>
Breadcrumb Trail
</h1>
<p class="mdl-typography--subhead" style="color: #757575;">
Fil d'Ariane Material Design - 6 Variantes
</p>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 1 : Standard Material -->
<!-- ============================================================ -->
<div class="breadcrumb-section">
<div class="section-header">
<i class="material-icons" style="color: #3f51b5;">chevron_right</i>
<h5 class="mdl-typography--title" style="margin: 0;">Variante 1 : Style Material Standard</h5>
</div>
<div class="breadcrumb-standard">
<nav aria-label="Breadcrumb standard">
<ol class="mdl-breadcrumb">
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">
<i class="material-icons" style="font-size: 18px; margin-right: 4px;">home</i>
Accueil
</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">Produits</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">Électronique</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">Smartphones</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item" aria-current="page">
<span class="mdl-breadcrumb__current">iPhone 15 Pro Max</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 2 : Compact -->
<!-- ============================================================ -->
<div class="breadcrumb-section">
<div class="section-header">
<i class="material-icons" style="color: #ff4081;">keyboard_arrow_right</i>
<h5 class="mdl-typography--title" style="margin: 0;">Variante 2 : Style Compact Uppercase</h5>
</div>
<div class="breadcrumb-compact">
<nav aria-label="Breadcrumb compact">
<ol class="mdl-breadcrumb">
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">Accueil</a>
<span class="mdl-breadcrumb__separator">/</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">Mode</a>
<span class="mdl-breadcrumb__separator">/</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">Homme</a>
<span class="mdl-breadcrumb__separator">/</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">Vestes</a>
<span class="mdl-breadcrumb__separator">/</span>
</li>
<li class="mdl-breadcrumb__item" aria-current="page">
<span class="mdl-breadcrumb__current">Cuir Premium</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 3 : Chips -->
<!-- ============================================================ -->
<div class="breadcrumb-section">
<div class="section-header">
<i class="material-icons" style="color: #3f51b5;">bubble_chart</i>
<h5 class="mdl-typography--title" style="margin: 0;">Variante 3 : Style Chips / Pillules</h5>
</div>
<div class="breadcrumb-chips">
<nav aria-label="Breadcrumb chips">
<ol class="mdl-breadcrumb">
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__chip ripple-effect">
<i class="material-icons" style="font-size: 16px; margin-right: 4px;">home</i>
Accueil
</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__chip ripple-effect">Gaming</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__chip ripple-effect">Consoles</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item" aria-current="page">
<span class="mdl-breadcrumb__chip mdl-breadcrumb__chip--active">
<i class="material-icons" style="font-size: 16px; margin-right: 4px;">check_circle</i>
PlayStation 5
</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 4 : Avec icônes personnalisées -->
<!-- ============================================================ -->
<div class="breadcrumb-section">
<div class="section-header">
<i class="material-icons" style="color: #00897b;">stars</i>
<h5 class="mdl-typography--title" style="margin: 0;">Variante 4 : Icônes Personnalisées</h5>
</div>
<div class="breadcrumb-icons">
<nav aria-label="Breadcrumb icônes">
<ol class="mdl-breadcrumb">
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">
<i class="material-icons">storefront</i>
Boutique
</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">
<i class="material-icons">category</i>
Catégories
</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">
<i class="material-icons">local_offer</i>
Promotions
</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item" aria-current="page">
<span class="mdl-breadcrumb__current">
<i class="material-icons">star</i>
Offre Spéciale
</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 5 : FAB Style -->
<!-- ============================================================ -->
<div class="breadcrumb-section">
<div class="section-header">
<i class="material-icons" style="color: #ff5722;">radio_button_checked</i>
<h5 class="mdl-typography--title" style="margin: 0;">Variante 5 : Style Boutons Flottants</h5>
</div>
<div class="breadcrumb-fab">
<nav aria-label="Breadcrumb fab">
<ol class="mdl-breadcrumb">
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__button ripple-effect">
<i class="material-icons">home</i>
Accueil
</a>
<span class="mdl-breadcrumb__separator">→</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__button ripple-effect">
<i class="material-icons">devices</i>
Tech
</a>
<span class="mdl-breadcrumb__separator">→</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__button ripple-effect">
<i class="material-icons">laptop</i>
Ordinateurs
</a>
<span class="mdl-breadcrumb__separator">→</span>
</li>
<li class="mdl-breadcrumb__item" aria-current="page">
<span class="mdl-breadcrumb__button mdl-breadcrumb__button--active">
<i class="material-icons">check</i>
MacBook Pro
</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 6 : Dark Theme -->
<!-- ============================================================ -->
<div class="breadcrumb-section breadcrumb-dark">
<div class="section-header" style="background: #263238; border-bottom-color: #37474f;">
<i class="material-icons" style="color: #ffd54f;">nights_stay</i>
<h5 class="mdl-typography--title" style="margin: 0; color: white;">Variante 6 : Thème Sombre</h5>
</div>
<div class="breadcrumb-dark">
<nav aria-label="Breadcrumb dark">
<ol class="mdl-breadcrumb">
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">
<i class="material-icons" style="font-size: 16px; vertical-align: middle;">home</i>
Accueil
</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">Collections</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item">
<a href="#" class="mdl-breadcrumb__link">Hiver 2024</a>
<span class="mdl-breadcrumb__separator">›</span>
</li>
<li class="mdl-breadcrumb__item" aria-current="page">
<span class="mdl-breadcrumb__current">
<i class="material-icons" style="font-size: 16px; vertical-align: middle;">whatshot</i>
Collection Capsule
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mdl-mini-footer" style="margin-top: 48px;">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">ShopMaterial © 2024</div>
</div>
</footer>
</main>
</div>
<script>
// ============================================================
// BREADCRUMB TRAIL - Interactions JavaScript
// ============================================================
document.addEventListener('DOMContentLoaded', function() {
// Gestion des clics sur les liens breadcrumb
document.querySelectorAll('nav[aria-label] a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
// Effet ripple Material Design
createRipple(e, this);
// Feedback dans la console
const text = this.textContent.trim();
console.log('Navigation Breadcrumb →', text);
// Animation de clic
this.style.transform = 'scale(0.96)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 150);
});
});
// Empêcher le clic sur les éléments actifs
document.querySelectorAll('[aria-current="page"]').forEach(item => {
item.style.cursor = 'default';
item.addEventListener('click', function(e) {
e.preventDefault();
});
});
// Ajouter des tooltips sur les liens avec icônes
document.querySelectorAll('.breadcrumb-icons .mdl-breadcrumb__link, .breadcrumb-fab .mdl-breadcrumb__button').forEach(link => {
link.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-1px)';
});
link.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
});
// Fonction d'effet ripple Material Design
function createRipple(event, element) {
const ripple = document.createElement('span');
const rect = element.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = event.clientX - rect.left - size / 2;
const y = event.clientY - rect.top - size / 2;
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
ripple.style.position = 'absolute';
ripple.style.borderRadius = '50%';
ripple.style.background = 'rgba(63, 81, 181, 0.3)';
ripple.style.transform = 'scale(0)';
ripple.style.animation = 'ripple 0.6s ease-out';
ripple.style.pointerEvents = 'none';
element.style.position = 'relative';
element.style.overflow = 'hidden';
element.appendChild(ripple);
ripple.addEventListener('animationend', () => {
ripple.remove();
});
}
</script>
</body>
</html>Télécharger le fichier source