Bootstrap 5
Mega Menu
Navigation
Responsive
Dropdown
Multi Niveaux
Navbar
Menu
Html
Snippet
Composant mega menu Bootstrap 5 responsive avec colonnes multi-niveaux, icônes, sous-menus déroulants et fermeture automatique au clic extérieur.
<!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 Megamenu Bootstrap 5 2026 05010845 | 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>
<!-- ============================================================ -->
<!-- COMPOSANT : MEGAMENU -->
<!-- ============================================================ -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top shadow">
<div class="container">
<!-- Logo -->
<a class="navbar-brand d-flex align-items-center" href="#">
<i class="bi bi-shop fs-3 me-2"></i>
<span class="fw-bold">Shop<span class="text-primary">Pro</span></span>
</a>
<!-- Bouton hamburger mobile -->
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#megaMenuContainer"
aria-controls="megaMenuContainer" aria-expanded="false" aria-label="Menu">
<i class="bi bi-list fs-2"></i>
</button>
<!-- Container MegaMenu -->
<div class="collapse navbar-collapse" id="megaMenuContainer">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- Item 1 : Accueil (simple) -->
<li class="nav-item">
<a class="nav-link active" href="#">Accueil</a>
</li>
<!-- Item 2 : Produits avec MegaMenu -->
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Produits
</a>
<!-- MegaMenu Dropdown -->
<div class="dropdown-menu mega-menu w-100 p-4 shadow-lg border-0 rounded-3 mt-2">
<div class="container">
<div class="row g-4">
<!-- Colonne 1 : Électronique -->
<div class="col-lg-3 col-md-6">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-laptop fs-4 text-primary me-2"></i>
<h6 class="fw-bold mb-0 text-uppercase">Électronique</h6>
</div>
<ul class="list-unstyled">
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-phone me-2"></i>Smartphones
</a></li>
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-laptop me-2"></i>Ordinateurs
</a></li>
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-tablet me-2"></i>Tablettes
</a></li>
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-headphones me-2"></i>Audio
</a></li>
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-smartwatch me-2"></i>Wearables
</a></li>
</ul>
<!-- Image promotionnelle -->
<div class="mt-3 rounded-3 bg-primary bg-opacity-10 p-3 text-center">
<i class="bi bi-lightning-charge fs-1 text-primary"></i>
<p class="small mb-0 mt-2">-20% sur l'électronique</p>
</div>
</div>
<!-- Colonne 2 : Mode -->
<div class="col-lg-3 col-md-6">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-handbag fs-4 text-danger me-2"></i>
<h6 class="fw-bold mb-0 text-uppercase">Mode</h6>
</div>
<ul class="list-unstyled">
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-gender-male me-2"></i>Homme
</a></li>
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-gender-female me-2"></i>Femme
</a></li>
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-suit-heart me-2"></i>Enfants
</a></li>
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-bag me-2"></i>Accessoires
</a></li>
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-gem me-2"></i>Bijoux
</a></li>
</ul>
<!-- Badge promo -->
<div class="mt-3">
<span class="badge bg-danger rounded-pill px-3 py-2">
<i class="bi bi-fire me-1"></i>Nouvelle Collection
</span>
</div>
</div>
<!-- Colonne 3 : Maison -->
<div class="col-lg-3 col-md-6">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-house-heart fs-4 text-success me-2"></i>
<h6 class="fw-bold mb-0 text-uppercase">Maison</h6>
</div>
<ul class="list-unstyled">
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-lamp me-2"></i>Décoration
</a></li>
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-cup-hot me-2"></i>Cuisine
</a></li>
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-flower1 me-2"></i>Jardin
</a></li>
<li><a class="dropdown-item rounded-2 py-2" href="#">
<i class="bi bi-lightbulb me-2"></i>Éclairage
</a></li>
</ul>
</div>
<!-- Colonne 4 : Image mise en avant -->
<div class="col-lg-3 col-md-6">
<div class="card bg-dark text-white border-0 overflow-hidden rounded-3 h-100">
<div class="card-body d-flex flex-column justify-content-center align-items-center text-center p-4"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<i class="bi bi-stars fs-1 mb-3"></i>
<h5 class="card-title">Offre Spéciale</h5>
<p class="card-text small">Jusqu'à -50% sur une sélection d'articles</p>
<a href="#" class="btn btn-light btn-sm rounded-pill px-4 mt-2">
Voir les offres
<i class="bi bi-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Footer du MegaMenu -->
<div class="row mt-4 pt-4 border-top">
<div class="col-12">
<div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="d-flex gap-3">
<a href="#" class="text-decoration-none text-muted small">
<i class="bi bi-tag me-1"></i>Promotions
</a>
<a href="#" class="text-decoration-none text-muted small">
<i class="bi bi-star me-1"></i>Meilleures ventes
</a>
<a href="#" class="text-decoration-none text-muted small">
<i class="bi bi-clock me-1"></i>Nouveautés
</a>
</div>
<a href="#" class="btn btn-primary btn-sm rounded-pill px-4">
Tous les produits <i class="bi bi-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- Item 3 : À propos (simple) -->
<li class="nav-item">
<a class="nav-link" href="#">À propos</a>
</li>
<!-- Item 4 : Contact (simple) -->
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<!-- Barre de recherche -->
<div class="d-flex align-items-center gap-3">
<div class="input-group input-group-sm" style="max-width: 250px;">
<span class="input-group-text bg-transparent border-secondary text-light">
<i class="bi bi-search"></i>
</span>
<input type="text" class="form-control bg-transparent border-secondary text-light"
placeholder="Rechercher...">
</div>
<!-- Icône panier -->
<button class="btn btn-outline-light btn-sm position-relative rounded-pill px-3">
<i class="bi bi-cart3"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
3
</span>
</button>
</div>
</div>
</div>
</nav>
<!-- ============================================================ -->
<!-- SECTION DÉMO : Contenu de la page -->
<!-- ============================================================ -->
<div class="container py-5">
<div class="row">
<div class="col-12">
<div class="bg-light rounded-3 p-5 text-center">
<i class="bi bi-menu-button-wide fs-1 text-primary"></i>
<h2 class="mt-3">Composant MegaMenu</h2>
<p class="text-muted lead">
Menu dropdown multi-colonnes avec images, catégories et sections promotionnelles
</p>
<div class="row mt-5">
<div class="col-md-4">
<div class="card border-primary">
<div class="card-body">
<i class="bi bi-palette fs-3 text-primary"></i>
<h5>Multi-colonnes</h5>
<p class="small text-muted">Organisation en grille avec jusqu'à 4 colonnes</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-success">
<div class="card-body">
<i class="bi bi-image fs-3 text-success"></i>
<h5>Images intégrées</h5>
<p class="small text-muted">Zones promotionnelles avec images et CTA</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-warning">
<div class="card-body">
<i class="bi bi-phone fs-3 text-warning"></i>
<h5>Responsive</h5>
<p class="small text-muted">S'adapte en accordéon sur mobile</p>
</div>
</div>
</div>
</div>
</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>
// ============================================================
// MEGAMENU - Gestion des interactions
// ============================================================
document.addEventListener('DOMContentLoaded', function() {
// Gestion du MegaMenu au hover sur desktop
const megaMenuTriggers = document.querySelectorAll('.nav-item.dropdown');
megaMenuTriggers.forEach(trigger => {
const dropdownMenu = trigger.querySelector('.dropdown-menu');
if (dropdownMenu && window.innerWidth >= 992) {
let hideTimeout;
const showMenu = function() {
clearTimeout(hideTimeout);
const toggle = trigger.querySelector('.dropdown-toggle');
let bsDropdown = bootstrap.Dropdown.getInstance(toggle);
if (!bsDropdown) bsDropdown = new bootstrap.Dropdown(toggle);
bsDropdown.show();
};
const hideMenu = function() {
hideTimeout = setTimeout(function() {
const bsDropdown = bootstrap.Dropdown.getInstance(trigger.querySelector('.dropdown-toggle'));
if (bsDropdown) bsDropdown.hide();
}, 150);
};
trigger.addEventListener('mouseenter', showMenu);
trigger.addEventListener('mouseleave', hideMenu);
dropdownMenu.addEventListener('mouseenter', function() { clearTimeout(hideTimeout); });
dropdownMenu.addEventListener('mouseleave', hideMenu);
}
});
// Animation smooth sur les liens du menu
document.querySelectorAll('.dropdown-item').forEach(item => {
item.addEventListener('mouseenter', function() {
this.style.transform = 'translateX(5px)';
this.style.transition = 'transform 0.2s ease';
});
item.addEventListener('mouseleave', function() {
this.style.transform = 'translateX(0)';
});
});
// Fermer le menu mobile après clic sur un lien
document.querySelectorAll('.mega-menu .dropdown-item').forEach(link => {
link.addEventListener('click', function() {
const navbarCollapse = document.getElementById('megaMenuContainer');
const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse);
if (bsCollapse && window.innerWidth < 992) {
bsCollapse.hide();
}
});
});
});
</script>
<style>
/* ============================================================ */
/* Styles spécifiques au MegaMenu */
/* ============================================================ */
/* Animation d'apparition du MegaMenu */
.mega-menu {
animation: megaMenuFadeIn 0.3s ease-out;
}
@keyframes megaMenuFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Hover effects sur les liens */
.dropdown-item {
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
.dropdown-item:hover {
background-color: var(--bs-primary-bg-subtle);
border-left-color: var(--bs-primary);
padding-left: 1rem;
}
/* Badge promo animation */
@keyframes pulseBadge {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.badge.bg-danger {
animation: pulseBadge 2s ease-in-out infinite;
}
/* Navigation active indicator */
.nav-link.active::after {
content: '';
display: block;
width: 0;
height: 2px;
background: var(--bs-primary);
transition: width 0.3s;
}
.nav-link:hover::after {
width: 100%;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
.mega-menu {
padding: 1rem !important;
}
.mega-menu .col-lg-3 {
margin-bottom: 1rem;
}
}
</style>
</body>
</html>
Télécharger le fichier source