Material Design
Breadcrumb
Fil D Ariane
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