Nested Dropdown
Bootstrap nested (multilevel) Dropdown - free examples
Nested dropdowns built with Bootstrap 5. Tutorial & templates for multilevel navbar dropdowns menu, activated on hover or on click & much more
By adding a few lines of additional CSS you can add extra levels of submenu to your dropdown. You can apply this to the dropdown in a simple button or within the navbar.
To learn more about dropdowns read Dropdown Docs.
Button dropdown
An example of a nested dropdown with a simple button.
<div class="dropdown">
<button data-mdb-button-init data-mdb-ripple-init data-mdb-dropdown-init
class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
data-mdb-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">
Submenu »
</a>
<ul class="dropdown-menu dropdown-submenu">
<li>
<a class="dropdown-item" href="#">Submenu item 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 3 » </a>
<ul class="dropdown-menu dropdown-submenu">
<li>
<a class="dropdown-item" href="#">Multi level 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Multi level 2</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 4</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 5</a>
</li>
</ul>
</li>
</ul>
</div>
.dropdown-menu li {
position: relative;
}
.dropdown-menu .dropdown-submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
right: 100%;
left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
display: block;
}
Navbar dropdown
An example of nested dropdown within the Navbar.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<ul class="navbar-nav">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#"
id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">
Submenu »
</a>
<ul class="dropdown-menu dropdown-submenu">
<li>
<a class="dropdown-item" href="#">Submenu item 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 3 » </a>
<ul class="dropdown-menu dropdown-submenu">
<li>
<a class="dropdown-item" href="#">Multi level 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Multi level 2</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 4</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 5</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
.dropdown-menu li {
position: relative;
}
.dropdown-menu .dropdown-submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
right: 100%;
left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
display: block;
}
Navbar dropdown left
An example of a nested dropdown with the submenu expanding on the left side instead of the right side.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<ul class="navbar-nav ms-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#"
id="navbarDropdownMenuLinkRight" role="button" data-mdb-toggle="dropdown"
aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkRight">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<a class="dropdown-item" href="#"> Submenu » </a>
<ul class="dropdown-menu dropdown-submenu dropdown-submenu-left">
<li>
<a class="dropdown-item" href="#">Submenu item 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 4</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 5</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
.dropdown-menu li {
position: relative;
}
.dropdown-menu .dropdown-submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
right: 100%;
left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
display: block;
}
Nested dropdown on hover
An example of a nested dropdown activated on hover, it can also be embedded inside on a Navbar .
<div class=" d-flex justify-content-center">
<div class="dropdown dropdown-hover">
<button data-mdb-button-init data-mdb-ripple-init data-mdb-dropdown-init
class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
data-mdb-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-hover" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#"> Submenu » </a>
<ul class="dropdown-menu dropdown-submenu">
<li>
<a class="dropdown-item" href="#">Submenu item 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 3 » </a>
<ul class="dropdown-menu dropdown-submenu">
<li>
<a class="dropdown-item" href="#">Multi level 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Multi level 2</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 4</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu item 5</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
.dropdown-hover:hover>.dropdown-menu-hover {
display: block;
}
.dropdown-hover>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}
Related resources
Mega Menu Sections
Admin Navigation Sections
Mega Menu
Multiselect
Spacing
Dropdown
Navbar
Button
RLT
Also, if you want to support our friends from TW Elements you can also check out the Tailwind dropdown documentation.