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:
I use the following piece of css and javacript. 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; }The following is MultiLevel dropdown based on bootstrap4. I tried it was according to the bootstrap4 basic dropdown.
.dropdown-submenu{ position: relative; } .dropdown-submenu a::after{ transform: rotate(-90deg); position: absolute; right: 3px; top: 40%; } .dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus .dropdown-menu{ display: flex; flex-direction: column; position: absolute !important; margin-top: -30px; left: 100%; } @media (max-width: 992px) { .dropdown-menu{ width: 50%; } .dropdown-menu .dropdown-submenu{ width: auto; } }I found this multidrop-down menu which work great in all device.
Also, have hover style
It supports multi-level submenus with bootstrap 4.
$( document ).ready( function () { $( '.navbar a.dropdown-toggle' ).on( 'click', function ( e ) { var $el = $( this ); var $parent = $( this ).offsetParent( ".dropdown-menu" ); $( this ).parent( "li" ).toggleClass( 'show' ); if ( !$parent.parent().hasClass( 'navbar-nav' ) ) { $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } ); } $( '.navbar-nav li.show' ).not( $( this ).parents( "li" ) ).removeClass( "show" ); return false; } ); } );.navbar-light .navbar-nav .nav-link { color: rgb(64, 64, 64); } .btco-menu li > a { padding: 10px 15px; color: #000; } .btco-menu .active a:focus, .btco-menu li a:focus , .navbar > .show > a:focus{ background: transparent; outline: 0; } .dropdown-menu .show > .dropdown-toggle::after{ transform: rotate(-90deg); }Updated 2018
Here is another variation on the Bootstrap 4 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