Bootstrap 5
Breadcrumb
Fil D Ariane
Navigation
Responsive
Accessibilite
Aria
Separateur
Html
Snippet
Fil d'Ariane Bootstrap 5 responsive avec variantes de styles, icônes intégrées, séparateurs personnalisés et attributs ARIA pour accessibilité.
<!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 Bootstrap 5 2026 05011640 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<!-- Header simple -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-shop me-2"></i>ShopBreadcrumb
</a>
</div>
</nav>
<!-- ============================================================ -->
<!-- COMPOSANT : BREADCRUMB TRAIL -->
<!-- ============================================================ -->
<div class="container py-4">
<!-- Titre de démonstration -->
<div class="row mb-4">
<div class="col-12">
<div class="d-flex align-items-center gap-3">
<i class="bi bi-signpost-split fs-2 text-primary"></i>
<div>
<h2 class="mb-0">Breadcrumb Trail</h2>
<p class="text-muted mb-0">Fil d'Ariane dynamique et personnalisable</p>
</div>
</div>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 1 : Chevrons (Style Bootstrap par défaut) -->
<!-- ============================================================ -->
<div class="card shadow-sm mb-4">
<div class="card-header bg-white">
<h5 class="mb-0">
<i class="bi bi-chevron-right text-primary me-2"></i>
Variante 1 : Style Chevrons (Défaut Bootstrap)
</h5>
</div>
<div class="card-body">
<!-- Breadcrumb Chevrons -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0" id="breadcrumbChevrons">
<li class="breadcrumb-item">
<a href="#">
<i class="bi bi-house-door-fill me-1"></i>Accueil
</a>
</li>
<li class="breadcrumb-item">
<a href="#">Produits</a>
</li>
<li class="breadcrumb-item">
<a href="#">Électronique</a>
</li>
<li class="breadcrumb-item">
<a href="#">Smartphones</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
iPhone 15 Pro Max
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 2 : Slashes -->
<!-- ============================================================ -->
<div class="card shadow-sm mb-4">
<div class="card-header bg-white">
<h5 class="mb-0">
<i class="bi bi-slash-lg text-success me-2"></i>
Variante 2 : Style Slashes
</h5>
</div>
<div class="card-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-slashes mb-0" id="breadcrumbSlashes">
<li class="breadcrumb-item">
<a href="#" class="text-decoration-none">
<i class="bi bi-house-fill me-1"></i>Accueil
</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="text-decoration-none">Mode</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="text-decoration-none">Homme</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="text-decoration-none">Vestes</a>
</li>
<li class="breadcrumb-item active text-muted" aria-current="page">
Veste en Cuir Premium
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 3 : Flèches personnalisées -->
<!-- ============================================================ -->
<div class="card shadow-sm mb-4">
<div class="card-header bg-white">
<h5 class="mb-0">
<i class="bi bi-arrow-right text-warning me-2"></i>
Variante 3 : Style Flèches
</h5>
</div>
<div class="card-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-arrows mb-0" id="breadcrumbArrows">
<li class="breadcrumb-item">
<a href="#" class="text-decoration-none fw-semibold">
<i class="bi bi-house-gear-fill me-1"></i>Accueil
</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="text-decoration-none fw-semibold">Maison</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="text-decoration-none fw-semibold">Décoration</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="text-decoration-none fw-semibold">Luminaires</a>
</li>
<li class="breadcrumb-item active fw-bold text-dark" aria-current="page">
Lampe Design Scandinave
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 4 : Pills (Style boutons) -->
<!-- ============================================================ -->
<div class="card shadow-sm mb-4">
<div class="card-header bg-white">
<h5 class="mb-0">
<i class="bi bi-puzzle text-info me-2"></i>
Variante 4 : Style Pills
</h5>
</div>
<div class="card-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-pills mb-0 d-flex flex-wrap gap-2" id="breadcrumbPills">
<li class="breadcrumb-item">
<a href="#" class="badge bg-primary bg-opacity-10 text-primary text-decoration-none px-3 py-2 rounded-pill">
<i class="bi bi-house-fill me-1"></i>Accueil
</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="badge bg-secondary bg-opacity-10 text-secondary text-decoration-none px-3 py-2 rounded-pill">
Gaming
</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="badge bg-secondary bg-opacity-10 text-secondary text-decoration-none px-3 py-2 rounded-pill">
Consoles
</a>
</li>
<li class="breadcrumb-item active">
<span class="badge bg-success text-white px-3 py-2 rounded-pill">
PlayStation 5
</span>
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- VARIANTE 5 : Avec icônes personnalisés -->
<!-- ============================================================ -->
<div class="card shadow-sm mb-4">
<div class="card-header bg-white">
<h5 class="mb-0">
<i class="bi bi-emoji-smile text-danger me-2"></i>
Variante 5 : Icônes personnalisés par étape
</h5>
</div>
<div class="card-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-icons mb-0" id="breadcrumbIcons">
<li class="breadcrumb-item">
<a href="#" class="d-flex align-items-center text-decoration-none">
<i class="bi bi-house-heart-fill text-primary me-1"></i>Accueil
</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="d-flex align-items-center text-decoration-none">
<i class="bi bi-grid-fill text-success me-1"></i>Catégories
</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="d-flex align-items-center text-decoration-none">
<i class="bi bi-tag-fill text-warning me-1"></i>Promotions
</a>
</li>
<li class="breadcrumb-item active d-flex align-items-center text-muted" aria-current="page">
<i class="bi bi-star-fill text-danger me-1"></i>Offre Spéciale
</li>
</ol>
</nav>
</div>
</div>
<!-- ============================================================ -->
<!-- DÉMO INTERACTIVE -->
<!-- ============================================================ -->
<div class="card shadow-sm border-primary">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">
<i class="bi bi-play-circle me-2"></i>
Démo Interactive - Générateur de Breadcrumb
</h5>
</div>
<div class="card-body">
<div class="row g-3 align-items-end">
<div class="col-md-4">
<label class="form-label fw-semibold">Séparateur</label>
<select id="separatorSelect" class="form-select">
<option value="chevrons">Chevrons (/)</option>
<option value="slashes">Slashes (//)</option>
<option value="arrows">Flèches (→)</option>
<option value="dots">Points (·)</option>
<option value="pipes">Pipes (|)</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Nombre d'étapes</label>
<input type="number" id="stepsCount" class="form-control" min="2" max="6" value="4">
</div>
<div class="col-md-4">
<button id="generateBreadcrumb" class="btn btn-primary w-100">
<i class="bi bi-arrow-repeat me-1"></i>Générer
</button>
</div>
</div>
<!-- Résultat dynamique -->
<div class="mt-4 p-4 bg-light rounded-3">
<p class="text-muted small mb-2">Résultat :</p>
<nav aria-label="breadcrumb dynamic">
<ol class="breadcrumb mb-0" id="dynamicBreadcrumb">
<!-- Généré dynamiquement -->
</ol>
</nav>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// ============================================================
// BREADCRUMB TRAIL - Logique Interactive
// ============================================================
document.addEventListener('DOMContentLoaded', function() {
// Catégories par défaut pour la démo
const defaultPaths = {
chevrons: ['Accueil', 'Produits', 'Électronique', 'Smartphones'],
slashes: ['Accueil', 'Mode', 'Homme', 'Vestes'],
arrows: ['Accueil', 'Maison', 'Décoration', 'Luminaires'],
pills: ['Accueil', 'Gaming', 'Consoles', 'PlayStation 5'],
icons: ['Accueil', 'Catégories', 'Promotions', 'Offre Spéciale']
};
// Icônes disponibles
const icons = [
'bi-house-fill',
'bi-grid-fill',
'bi-tag-fill',
'bi-star-fill',
'bi-heart-fill',
'bi-gem',
'bi-fire'
];
// Fonction pour générer un breadcrumb dynamique
function generateBreadcrumb(separator, steps) {
const paths = [
'Accueil',
'Produits',
'Électronique',
'Smartphones',
'Apple',
'iPhone 15 Pro Max'
];
const dynamicBreadcrumb = document.getElementById('dynamicBreadcrumb');
const usedSteps = paths.slice(0, Math.min(steps, paths.length));
// Nettoyer les classes précédentes
dynamicBreadcrumb.className = 'breadcrumb mb-0';
// Appliquer la classe de séparateur
switch(separator) {
case 'slashes':
dynamicBreadcrumb.classList.add('breadcrumb-slashes');
break;
case 'arrows':
dynamicBreadcrumb.classList.add('breadcrumb-arrows');
break;
case 'dots':
dynamicBreadcrumb.classList.add('breadcrumb-dots');
break;
case 'pipes':
dynamicBreadcrumb.classList.add('breadcrumb-pipes');
break;
default:
// Chevrons par défaut (style Bootstrap)
break;
}
// Générer les éléments
dynamicBreadcrumb.innerHTML = usedSteps.map((step, index) => {
const isLast = index === usedSteps.length - 1;
const icon = icons[index % icons.length];
if (isLast) {
return `
<li class="breadcrumb-item active" aria-current="page">
<i class="bi ${icon} me-1"></i>${step}
</li>
`;
} else {
return `
<li class="breadcrumb-item">
<a href="#" class="text-decoration-none">
<i class="bi ${icon} me-1"></i>${step}
</a>
</li>
`;
}
}).join('');
// Animation d'apparition
dynamicBreadcrumb.style.opacity = '0';
dynamicBreadcrumb.style.transform = 'translateY(-10px)';
dynamicBreadcrumb.style.transition = 'all 0.3s ease';
setTimeout(() => {
dynamicBreadcrumb.style.opacity = '1';
dynamicBreadcrumb.style.transform = 'translateY(0)';
}, 100);
}
// Événement du bouton générer
document.getElementById('generateBreadcrumb').addEventListener('click', function() {
const separator = document.getElementById('separatorSelect').value;
const steps = parseInt(document.getElementById('stepsCount').value);
generateBreadcrumb(separator, steps);
});
// Générer un breadcrumb initial
generateBreadcrumb('chevrons', 4);
// Animation au clic sur les breadcrumbs
document.querySelectorAll('.breadcrumb-item a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
// Effet de clic
this.style.transform = 'scale(0.95)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 150);
// Feedback visuel
const originalColor = this.style.color;
this.style.color = 'var(--bs-primary)';
setTimeout(() => {
this.style.color = originalColor;
}, 300);
});
});
// Marquer le dernier élément comme non cliquable
document.querySelectorAll('.breadcrumb-item.active').forEach(item => {
item.style.cursor = 'default';
item.style.userSelect = 'none';
});
});
</script>
<style>
/* ============================================================ */
/* Styles des variantes de Breadcrumb */
/* ============================================================ */
/* Variante Slashes */
.breadcrumb-slashes .breadcrumb-item + .breadcrumb-item::before {
content: "//";
color: #6c757d;
font-weight: bold;
padding: 0 0.5rem;
}
/* Variante Flèches */
.breadcrumb-arrows .breadcrumb-item + .breadcrumb-item::before {
content: "→";
color: #ffc107;
font-weight: bold;
font-size: 1.2rem;
padding: 0 0.5rem;
}
/* Variante Points */
.breadcrumb-dots .breadcrumb-item + .breadcrumb-item::before {
content: "·";
color: #0d6efd;
font-weight: bold;
font-size: 1.5rem;
line-height: 0;
vertical-align: middle;
padding: 0 0.5rem;
}
/* Variante Pipes */
.breadcrumb-pipes .breadcrumb-item + .breadcrumb-item::before {
content: "|";
color: #adb5bd;
font-weight: 300;
padding: 0 0.5rem;
}
/* Variante Pills */
.breadcrumb-pills .breadcrumb-item + .breadcrumb-item::before {
content: "";
padding: 0;
}
/* Animation hover sur les liens */
.breadcrumb-item a {
position: relative;
transition: all 0.3s ease;
}
.breadcrumb-item a:hover {
color: var(--bs-primary) !important;
transform: translateX(3px);
display: inline-block;
}
/* Style pour le dernier élément */
.breadcrumb-item.active {
font-weight: 600;
cursor: default;
}
/* Animation d'apparition */
@keyframes breadcrumbFadeIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.breadcrumb-item {
animation: breadcrumbFadeIn 0.5s ease-out forwards;
}
.breadcrumb-item:nth-child(1) { animation-delay: 0.1s; }
.breadcrumb-item:nth-child(2) { animation-delay: 0.2s; }
.breadcrumb-item:nth-child(3) { animation-delay: 0.3s; }
.breadcrumb-item:nth-child(4) { animation-delay: 0.4s; }
.breadcrumb-item:nth-child(5) { animation-delay: 0.5s; }
.breadcrumb-item:nth-child(6) { animation-delay: 0.6s; }
/* Responsive */
@media (max-width: 576px) {
.breadcrumb {
font-size: 0.85rem;
}
.breadcrumb-pills {
gap: 0.5rem !important;
}
.breadcrumb-pills .badge {
font-size: 0.75rem;
padding: 0.25rem 0.75rem !important;
}
}
</style>
</body>
</html>Télécharger le fichier source