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
Also, if you want to support our friends from TW Elements you can also check out the Tailwind dropdown documentation.