Bootstrap 4: Multilevel Dropdown Inside Navigation
I use the following piece of CSS and JavaScript. It uses an extra class dropdown-submenu. I tested it with Bootstrap 4 beta.
It supports multi level sub menus.
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) { if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass('show'); } var $subMenu = $(this).next('.dropdown-menu'); $subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass('show'); });
return false;});.dropdown-submenu { position: relative;}
.dropdown-submenu a::after { transform: rotate(-90deg); position: absolute; right: 6px; top: .8em;}
.dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-left: .1rem; margin-right: .1rem;}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" 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 class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Submenu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Submenu action</a></li> <li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Subsubmenu action</a></li> <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Subsubmenu action</a></li> <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li> </ul> </li>
</ul> </li> </ul> </li> </ul> </div></nav>How to make multilevel Drop-down menu in Navbar using Bootstrap 4 and Angular 7
Try with this:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<h2>Multi level dropdown menu in Bootstrap 3</h2>
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li><a href="#">Some action</a></li>
<li><a href="#">Some other action</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a href="#">Even More..</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
<li><a href="#">Second level</a></li>
<li><a href="#">Second level</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
See Reference: https://bootsnipp.com/snippets/kM4Q
Bootstrap 4 nested dropdown?
I think this is kinda what you are looking for.
Your updated code with one of the suggestions given in there would look something like the example given.
(If you use Angular you could use ngx-dropdowns they have a solution for nested dropdowns)
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) { if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass("show"); } var $subMenu = $(this).next(".dropdown-menu"); $subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass("show"); });
return false;});.dropdown-submenu { position: relative;}
.dropdown-submenu a::after { transform: rotate(-90deg); position: absolute; right: 6px; top: .8em;}
.dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-left: .1rem; margin-right: .1rem;}<!doctype html><html lang="en">
<head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title></head>
<body> <div class="dropdown show"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Select Streams </a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <li><a class="dropdown-item" href="#">Science</a></li> <li><a class="dropdown-item" href="#">Commerce</a></li> <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Arts</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">History</a></li> <li><a class="dropdown-item" href="#">Geography</a></li> <li><a class="dropdown-item" href="#">Sociology</a></li>
</ul> </li> </ul> </div>
<!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script></body>
</html>how to add 3rd level to this multi-level bootstrap dropdown?
Easy fix, just constrain the selector to its immediate child like this:
.dropdown-submenu:hover > .dropdown-menu, .dropdown-submenu:focus > .dropdown-menu{
display: flex;
flex-direction: column;
position: absolute !important;
margin-top: -30px;
left: 100%!important;
}
Then you can do this:
<a class="btn btn-secondary dropdown-toggle mb-1" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Style
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Level 2</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">b</a>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Level 3</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">c</a>
<a class="dropdown-item" href="#">d</a>
</ul>
</li>
</ul>
</li>
</ul>
Related Topics
How to Create Uneven Rounded Sides on a Div
Css Two Divs Next to Each Other
How to Remove the Arrow from a Select Element in Firefox
Changing Image on Hover With Css/Html
Change Div Order With CSS Depending on Device-Width
How to Have Two Background Colors For a Single HTML Element
How to Make Blinking/Flashing Text With CSS 3
Css - How to Style a Selected Radio Buttons Label
Is There a Limit to the Length of HTML Attributes
Do I Encode Ampersands in ≪A Href...≫
Minimum and Maximum Value of Z-Index
How to Get HTML 5 Input Type="Date" Working in Firefox And/Or Ie 10
How Does Jquery Work When There Are Multiple Elements With the Same Id Value
How to Use Content-Disposition For Force a File to Download to the Hard Drive
Make Background Color Extend into Overflow Area