What's the easiest way to make a multilevel dropdown in Bootstrap 4? All the examples I managed to find on SO were either too messy or not included in nav.
I've tried just placing a dropdown inside a dropdown, but that doesn't seem like it's working. Can someone help me with this one?
Here's the basic outline of my code:
_x000D_
_x000D_
_x000D_
_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">_x000D_
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>_x000D_
_x000D_
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">_x000D_
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">_x000D_
<span class="navbar-toggler-icon"></span>_x000D_
</button>_x000D_
<a class="navbar-brand" href="#">Navbar</a>_x000D_
<div class="collapse navbar-collapse" id="navbarNavDropdown">_x000D_
<ul class="navbar-nav">_x000D_
<li class="nav-item active">_x000D_
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>_x000D_
</li>_x000D_
<li class="nav-item">_x000D_
<a class="nav-link" href="#">Link 1</a>_x000D_
</li>_x000D_
<li class="nav-item dropdown">_x000D_
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">_x000D_
Dropdown link_x000D_
</a>_x000D_
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">_x000D_
<a class="dropdown-item" href="#">Action</a>_x000D_
<a class="dropdown-item" href="#">Another action</a>_x000D_
<a class="dropdown-item" href="#">Something else here</a>_x000D_
</div>_x000D_
</li>_x000D_
</ul>_x000D_
</div>_x000D_
</nav>This question is related to
html
css
twitter-bootstrap
bootstrap-4
The answer is
This one works on Bootstrap 4.3.1.
Jsfiddle: https://jsfiddle.net/ko6L31w4/1/
The HTML code might be a little bit messy because I create a slightly complex dropdown menu for comprehensive test, otherwise everything is pretty straight forward.
Js includes fewer ways to collapse opened dropdowns and CSS only includes minimal styles for full functionalities.
_x000D_
_x000D_
_x000D_
_x000D_
$(function() {_x000D_
$("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {_x000D_
event.preventDefault();_x000D_
event.stopPropagation();_x000D_
_x000D_
//method 1: remove show from sibilings and their children under your first parent_x000D_
_x000D_
/* if (!$(this).next().hasClass('show')) {_x000D_
_x000D_
$(this).parents('.dropdown-menu').first().find('.show').removeClass('show');_x000D_
} */ _x000D_
_x000D_
_x000D_
//method 2: remove show from all siblings of all your parents_x000D_
$(this).parents('.dropdown-submenu').siblings().find('.show').removeClass("show");_x000D_
_x000D_
$(this).siblings().toggleClass("show");_x000D_
_x000D_
_x000D_
//collapse all after nav is closed_x000D_
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {_x000D_
$('.dropdown-submenu .show').removeClass("show");_x000D_
});_x000D_
_x000D_
});_x000D_
});.dropdown-submenu {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.dropdown-submenu>.dropdown-menu {_x000D_
top: 0;_x000D_
left: 100%;_x000D_
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">_x000D_
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>_x000D_
_x000D_
_x000D_
<nav class="navbar navbar-expand-md navbar-light bg-white py-3 shadow-sm">_x000D_
<div class="container-fluid">_x000D_
<a href="#" class="navbar-brand font-weight-bold">Multilevel Dropdown</a>_x000D_
_x000D_
<button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler">_x000D_
<span class="navbar-toggler-icon"></span>_x000D_
</button>_x000D_
_x000D_
_x000D_
<div id="navbarContent" class="collapse navbar-collapse">_x000D_
<ul class="navbar-nav mr-auto">_x000D_
_x000D_
<!-- nav dropdown -->_x000D_
<li class="nav-item dropdown">_x000D_
_x000D_
<a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Dropdown</a>_x000D_
<ul class="dropdown-menu">_x000D_
_x000D_
<li><a href="#" class="dropdown-item">Some action</a></li>_x000D_
_x000D_
<!-- lvl 1 dropdown -->_x000D_
<li class="dropdown-submenu">_x000D_
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 1</a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="#" class="dropdown-item">level 2</a></li>_x000D_
_x000D_
<!-- lvl 2 dropdown -->_x000D_
<li class="dropdown-submenu">_x000D_
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="#" class="dropdown-item">level 3</a></li>_x000D_
_x000D_
<!-- lvl 3 dropdown --> _x000D_
<li class="dropdown-submenu">_x000D_
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 3</a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="#" class="dropdown-item">level 4</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
_x000D_
</ul>_x000D_
</li>_x000D_
_x000D_
<li><a href="#" class="dropdown-item">level 2</a></li>_x000D_
<li><a href="#" class="dropdown-item">level 2</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
_x000D_
<li><a href="#" class="dropdown-item">Some other action</a></li>_x000D_
_x000D_
<li class="dropdown-submenu">_x000D_
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 1</a>_x000D_
<ul class="dropdown-menu">_x000D_
_x000D_
<li class="dropdown-submenu">_x000D_
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="#" class="dropdown-item">level 3</a></li>_x000D_
<li><a href="#" class="dropdown-item">level 3</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
_x000D_
<li class="dropdown-submenu">_x000D_
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="#" class="dropdown-item">level 3</a></li>_x000D_
<li><a href="#" class="dropdown-item">level 3</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
_x000D_
<li><a href="#" class="dropdown-item">level 2</a></li>_x000D_
_x000D_
<li class="dropdown-submenu">_x000D_
<a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="#" class="dropdown-item">level 3</a></li>_x000D_
<li><a href="#" class="dropdown-item">level 3</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
_x000D_
<li><a href="#" class="dropdown-item">level 2</a></li>_x000D_
</ul>_x000D_
</li> _x000D_
</ul>_x000D_
</li>_x000D_
_x000D_
<li class="nav-item"><a href="#" class="nav-link">About</a></li>_x000D_
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>_x000D_
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>_x000D_
</nav>I found this multidrop-down menu which work great in all device.
Also, have hover style
It supports multi-level submenus with bootstrap 4.
_x000D_
_x000D_
_x000D_
_x000D_
$( document ).ready( function () {_x000D_
$( '.navbar a.dropdown-toggle' ).on( 'click', function ( e ) {_x000D_
var $el = $( this );_x000D_
var $parent = $( this ).offsetParent( ".dropdown-menu" );_x000D_
$( this ).parent( "li" ).toggleClass( 'show' );_x000D_
_x000D_
if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {_x000D_
$el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );_x000D_
}_x000D_
$( '.navbar-nav li.show' ).not( $( this ).parents( "li" ) ).removeClass( "show" );_x000D_
return false;_x000D_
} );_x000D_
} );.navbar-light .navbar-nav .nav-link {_x000D_
color: rgb(64, 64, 64);_x000D_
}_x000D_
.btco-menu li > a {_x000D_
padding: 10px 15px;_x000D_
color: #000;_x000D_
}_x000D_
_x000D_
.btco-menu .active a:focus,_x000D_
.btco-menu li a:focus ,_x000D_
.navbar > .show > a:focus{_x000D_
background: transparent;_x000D_
outline: 0;_x000D_
}_x000D_
_x000D_
.dropdown-menu .show > .dropdown-toggle::after{_x000D_
transform: rotate(-90deg);_x000D_
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">_x000D_
_x000D_
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>_x000D_
_x000D_
<nav class="navbar navbar-toggleable-md navbar-light bg-faded btco-menu">_x000D_
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">_x000D_
<span class="navbar-toggler-icon"></span>_x000D_
</button>_x000D_
<a class="navbar-brand" href="#">Navbar</a>_x000D_
<div class="collapse navbar-collapse" id="navbarNavDropdown">_x000D_
<ul class="navbar-nav">_x000D_
<li class="nav-item active">_x000D_
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>_x000D_
</li>_x000D_
<li class="nav-item">_x000D_
<a class="nav-link" href="#">Features</a>_x000D_
</li>_x000D_
<li class="nav-item">_x000D_
<a class="nav-link" href="#">Pricing</a>_x000D_
</li>_x000D_
<li class="nav-item dropdown">_x000D_
<a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>_x000D_
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">_x000D_
<li><a class="dropdown-item" href="#">Action</a></li>_x000D_
<li><a class="dropdown-item" href="#">Another action</a></li>_x000D_
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a class="dropdown-item" href="#">Submenu action</a></li>_x000D_
<li><a class="dropdown-item" href="#">Another submenu action</a></li>_x000D_
_x000D_
<li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>_x000D_
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
<li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>_x000D_
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</div>_x000D_
</nav>Updated 2018
Here is another variation on the Bootstrap 4.1 Navbar with multi-level dropdown. This one uses minimal CSS for the submenu, and can be re-positioned as desired:
https://www.codeply.com/go/nG6iMAmI2X
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
jQuery to control display of submenus:
$('.dropdown-submenu > a').on("click", function(e) {
var submenu = $(this);
$('.dropdown-submenu .dropdown-menu').removeClass('show');
submenu.next('.dropdown-menu').addClass('show');
e.stopPropagation();
});
$('.dropdown').on("hidden.bs.dropdown", function() {
// hide any open menus when parent closes
$('.dropdown-menu.show').removeClass('show');
});
See this answer for activating the Bootstrap 4 submenus on hover
Using official HTML without adding extra CSS styles and classes, it's like native support.
Just add the following code:
$.fn.dropdown = (function() {
var $bsDropdown = $.fn.dropdown;
return function(config) {
if (typeof config === 'string' && config === 'toggle') { // dropdown toggle trigged
$('.has-child-dropdown-show').removeClass('has-child-dropdown-show');
$(this).closest('.dropdown').parents('.dropdown').addClass('has-child-dropdown-show');
}
var ret = $bsDropdown.call($(this), config);
$(this).off('click.bs.dropdown'); // Turn off dropdown.js click event, it will call 'this.toggle()' internal
return ret;
}
})();
$(function() {
$('.dropdown [data-toggle="dropdown"]').on('click', function(e) {
$(this).dropdown('toggle');
e.stopPropagation();
});
$('.dropdown').on('hide.bs.dropdown', function(e) {
if ($(this).is('.has-child-dropdown-show')) {
$(this).removeClass('has-child-dropdown-show');
e.preventDefault();
}
e.stopPropagation();
});
});
Dropdown of bootstrap can be easily changed to infinite level. It's a pity that they didn't do it.
BTW, a hover version: https://github.com/dallaslu/bootstrap-4-multi-level-dropdown
Here is a perfect demo: https://jsfiddle.net/dallaslu/adky6jvs/ (works well with Bootstrap v4.4.1)
The following is MultiLevel dropdown based on bootstrap4. I tried it was according to the bootstrap4 basic dropdown.
_x000D_
_x000D_
_x000D_
_x000D_
.dropdown-submenu{_x000D_
position: relative;_x000D_
}_x000D_
.dropdown-submenu a::after{_x000D_
transform: rotate(-90deg);_x000D_
position: absolute;_x000D_
right: 3px;_x000D_
top: 40%;_x000D_
}_x000D_
.dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus .dropdown-menu{_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
position: absolute !important;_x000D_
margin-top: -30px;_x000D_
left: 100%;_x000D_
}_x000D_
@media (max-width: 992px) {_x000D_
.dropdown-menu{_x000D_
width: 50%;_x000D_
}_x000D_
.dropdown-menu .dropdown-submenu{_x000D_
width: auto;_x000D_
}_x000D_
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">_x000D_
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>_x000D_
_x000D_
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">_x000D_
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">_x000D_
<span class="navbar-toggler-icon"></span>_x000D_
</button>_x000D_
<a class="navbar-brand" href="#">Navbar</a>_x000D_
<div class="collapse navbar-collapse" id="navbarNavDropdown">_x000D_
<ul class="navbar-nav mr-auto">_x000D_
<li class="nav-item active">_x000D_
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>_x000D_
</li>_x000D_
<li class="nav-item">_x000D_
<a class="nav-link" href="#">Link 1</a>_x000D_
</li>_x000D_
<li class="nav-item dropdown">_x000D_
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">_x000D_
Dropdown link_x000D_
</a>_x000D_
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">_x000D_
<li><a class="dropdown-item" href="#">Action</a></li>_x000D_
<li><a class="dropdown-item" href="#">Another action</a></li>_x000D_
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Something else here</a>_x000D_
<ul class="dropdown-menu">_x000D_
<a class="dropdown-item" href="#">A</a>_x000D_
<a class="dropdown-item" href="#">b</a>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</div>_x000D_
</nav>Source: Stackoverflow.com