bootstrap 5 dropdown menu with nested submenu
Maria
Created Nov 01, 2025
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 0;
}
.demo-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px;
}
.demo-header {
text-align: center;
color: white;
margin-bottom: 50px;
}
.demo-header h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
}
.demo-header p {
font-size: 1.1rem;
opacity: 0.9;
}
/* Navbar Styles */
.navbar {
background: white;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
padding: 15px 25px;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
}
.navbar-nav .nav-link {
color: #2c3e50;
font-weight: 600;
padding: 10px 18px;
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
}
.navbar-nav .nav-link:hover {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
}
.navbar-nav .nav-link.active {
color: #667eea;
}
/* Dropdown Menu */
.dropdown-menu {
border: none;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
padding: 10px;
margin-top: 8px;
min-width: 240px;
}
.dropdown-item {
padding: 12px 18px;
border-radius: 8px;
color: #2c3e50;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
}
.dropdown-item:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: translateX(5px);
}
.dropdown-item:active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Nested Dropdown (Submenu) */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: 0;
margin-left: 5px;
display: none;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > .dropdown-item::after {
content: '›';
font-size: 1.3rem;
font-weight: 700;
margin-left: auto;
transition: transform 0.3s ease;
}
.dropdown-submenu > .dropdown-item:hover::after {
transform: translateX(3px);
}
/* Dropdown Divider */
.dropdown-divider {
margin: 8px 0;
opacity: 0.2;
}
/* Dropdown Header */
.dropdown-header {
padding: 8px 18px;
font-weight: 700;
color: #667eea;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Icon Styles */
.dropdown-icon {
width: 20px;
height: 20px;
margin-right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dropdown-icon svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* Badge */
.dropdown-badge {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
margin-left: 8px;
}
/* Mobile Responsive */
@media (max-width: 991px) {
.dropdown-submenu .dropdown-menu {
position: static;
display: none;
margin-left: 20px;
box-shadow: none;
background: rgba(102, 126, 234, 0.05);
}
.dropdown-submenu.show > .dropdown-menu {
display: block;
}
.dropdown-submenu > .dropdown-item::after {
content: '▼';
font-size: 0.8rem;
}
}
/* Demo Card */
.demo-card {
background: white;
border-radius: 15px;
padding: 30px;
margin-top: 30px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.demo-card h3 {
color: #2c3e50;
font-weight: 700;
margin-bottom: 15px;
}
.demo-card p {
color: #7f8c8d;
line-height: 1.8;
}
</style>
<div class="demo-container">
<div class="demo-header">
<h1>Nested Dropdown Menu</h1>
<p>Hover over menu items to see multi-level dropdowns in action</p>
</div>
<!-- Navbar with Nested Dropdowns -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">YourBrand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<!-- Simple Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
About
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Our Story</a></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Careers</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Contact Us</a></li>
</ul>
</li>
<!-- Nested Dropdown with Submenus -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
Services
</a>
<ul class="dropdown-menu">
<li class="dropdown-header">Our Services</li>
<!-- Submenu 1: Web Development -->
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">
<span class="dropdown-icon">
<svg viewBox="0 0 24 24"><path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/></svg>
</span>
Web Development
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Frontend Development</a></li>
<li><a class="dropdown-item" href="#">Backend Development</a></li>
<li><a class="dropdown-item" href="#">Full Stack Development</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">E-commerce Solutions</a></li>
</ul>
</li>
<!-- Submenu 2: Design -->
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">
<span class="dropdown-icon">
<svg viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4Z"/></svg>
</span>
Design Services
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">UI/UX Design</a></li>
<li><a class="dropdown-item" href="#">Graphic Design</a></li>
<li><a class="dropdown-item" href="#">Brand Identity</a></li>
<li><a class="dropdown-item" href="#">Motion Graphics</a></li>
</ul>
</li>
<!-- Submenu 3: Marketing -->
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">
<span class="dropdown-icon">
<svg viewBox="0 0 24 24"><path d="M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21Z"/></svg>
</span>
Digital Marketing
<span class="dropdown-badge">Hot</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">SEO Optimization</a></li>
<li><a class="dropdown-item" href="#">Social Media Marketing</a></li>
<li><a class="dropdown-item" href="#">Content Marketing</a></li>
<li><a class="dropdown-item" href="#">Email Campaigns</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Analytics & Reporting</a></li>
</ul>
</li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">View All Services</a></li>
</ul>
</li>
<!-- Nested Dropdown: Portfolio -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
Portfolio
</a>
<ul class="dropdown-menu">
<li class="dropdown-header">Featured Work</li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Web Projects</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Corporate Websites</a></li>
<li><a class="dropdown-item" href="#">E-commerce Sites</a></li>
<li><a class="dropdown-item" href="#">Landing Pages</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Mobile Apps</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">iOS Applications</a></li>
<li><a class="dropdown-item" href="#">Android Applications</a></li>
<li><a class="dropdown-item" href="#">Cross-Platform Apps</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Branding Projects</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Logo Design</a></li>
<li><a class="dropdown-item" href="#">Brand Guidelines</a></li>
<li><a class="dropdown-item" href="#">Marketing Materials</a></li>
</ul>
</li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">All Projects</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Demo Content -->
<div class="demo-card">
<h3>How It Works</h3>
<p>
<strong>Desktop:</strong> Hover over "Services" or "Portfolio" menu items to see multi-level dropdown menus. The submenus appear to the right of their parent items with smooth animations.
</p>
<p>
<strong>Mobile:</strong> On smaller screens, tap menu items to expand nested submenus. The submenus will appear below with proper indentation.
</p>
<p>
<strong>Features:</strong>
</p>
<ul>
<li>Multi-level nested dropdowns (unlimited depth)</li>
<li>Smooth hover animations and transitions</li>
<li>Icons and badges support</li>
<li>Fully responsive design</li>
<li>Bootstrap 5 compatible</li>
<li>Custom styling with gradient effects</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
// Enhanced functionality for nested dropdowns on mobile
document.addEventListener('DOMContentLoaded', function() {
// Handle mobile submenu clicks
if (window.innerWidth < 992) {
const submenuItems = document.querySelectorAll('.dropdown-submenu > .dropdown-item');
submenuItems.forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const parent = this.parentElement;
const submenu = parent.querySelector('.dropdown-menu');
// Close other open submenus at the same level
const siblings = parent.parentElement.querySelectorAll('.dropdown-submenu');
siblings.forEach(sibling => {
if (sibling !== parent) {
sibling.classList.remove('show');
const siblingMenu = sibling.querySelector('.dropdown-menu');
if (siblingMenu) {
siblingMenu.style.display = 'none';
}
}
});
// Toggle current submenu
parent.classList.toggle('show');
if (submenu) {
submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
}
});
});
}
// Desktop hover functionality
if (window.innerWidth >= 992) {
const submenuParents = document.querySelectorAll('.dropdown-submenu');
submenuParents.forEach(parent => {
parent.addEventListener('mouseenter', function() {
const submenu = this.querySelector('.dropdown-menu');
if (submenu) {
submenu.style.display = 'block';
}
});
parent.addEventListener('mouseleave', function() {
const submenu = this.querySelector('.dropdown-menu');
if (submenu) {
submenu.style.display = 'none';
}
});
});
}
});
// Reset submenu display on window resize
window.addEventListener('resize', function() {
const submenus = document.querySelectorAll('.dropdown-submenu .dropdown-menu');
submenus.forEach(submenu => {
submenu.style.display = '';
});
});
</script>
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!