"Bootstrap NavBar Menu Dropdowns"
Bootstrap 4.1.1 Snippet by fontenele

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation"> <a class="navbar-brand" href="#">Bootstrap 4 NavBar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="http://fontenele.github.io/bootstrap-navbar-dropdowns/" target="_blank">Github</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown1</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" href="#"><a>Action 1</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown1.1</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item" href="#"><a>Action 1.1</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown1.1.1</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Action 1.1.1</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2</a> <ul class="dropdown-menu" aria-labelledby="dropdown2"> <li class="dropdown-item" href="#"><a>Action 2 A</a></li> <li class="dropdown-item" href="#"><a>Action 2 B</a></li> <li class="dropdown-item" href="#"><a>Action 2 C</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1"> <li class="dropdown-item" href="#"><a>Action 2.1 A</a></li> <li class="dropdown-item" href="#"><a>Action 2.1 B</a></li> <li class="dropdown-item" href="#"><a>Action 2.1 C</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1.1</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-1"> <li class="dropdown-item" href="#"><a>Action 2.1.1 A</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.1 B</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.1 C</a></li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1.2</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-2"> <li class="dropdown-item" href="#"><a>Action 2.1.2 A</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.2 B</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.2 C</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <form class="form-inline mt-2 mt-md-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> <main role="main" class="container"> <div class="jumbotron text-center"> <h1>Bootstrap 4 NavBar</h1> <p class="lead text-info">NavBar with too many childs.</p> </div> </main>
.navbar .dropdown-toggle, .navbar .dropdown-menu a { cursor: pointer; } .navbar .dropdown-item.active, .navbar .dropdown-item:active { color: inherit; text-decoration: none; background-color: inherit; } .navbar .dropdown-item:focus, .navbar .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #f8f9fa; } @media (min-width: 767px) { .navbar .dropdown-toggle:not(.nav-link)::after { display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: 0; border-bottom: .3em solid transparent; border-top: .3em solid transparent; border-left: .3em solid; } }
$(document).ready(function () { $('.navbar .dropdown-item').on('click', function (e) { var $el = $(this).children('.dropdown-toggle'); var $parent = $el.offsetParent(".dropdown-menu"); $(this).parent("li").toggleClass('open'); if (!$parent.parent().hasClass('navbar-nav')) { if ($parent.hasClass('show')) { $parent.removeClass('show'); $el.next().removeClass('show'); $el.next().css({"top": -999, "left": -999}); } else { $parent.parent().find('.show').removeClass('show'); $parent.addClass('show'); $el.next().addClass('show'); $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4}); } e.preventDefault(); e.stopPropagation(); } }); $('.navbar .dropdown').on('hidden.bs.dropdown', function () { $(this).find('li.dropdown').removeClass('show open'); $(this).find('ul.dropdown-menu').removeClass('show open'); }); });

Related: See More


Questions / Comments:

My rewrite to make sure when you close the parent, all the childs is close too:

$(document).ready( function() {
$("li.dropdown-submenu > a").on("click", function(){
$("li.dropdown-submenu").removeClass("open");
if($(this).parent("li.dropdown-submenu").hasClass("in-use")){
$(this).parents("li.dropdown-submenu").addClass("open");
$(this).parent("li.dropdown-submenu").removeClass("open");
$(this).parent("li.dropdown-submenu").removeClass("in-use");
$(this).siblings('ul.dropdown-menu').children("li.dropdown-submenu").removeClass("open");
$(this).siblings('ul.dropdown-menu').children("li.dropdown-submenu").removeClass("in-use");
} else {
$(this).parents("li.dropdown-submenu").addClass("open");
$(this).parents("li.dropdown-submenu").addClass("in-use");
}
return false;
});
});

Azriel Omega () - 3 years ago - Reply 1


How can I use the dropdown links as a clickable link to open the page?
I want to open page onClick an onOver the dropdown should appear

Michael () - 3 years ago - Reply 1


links with this code doesn't work.

pedramham () - 2 weeks ago - Reply 0


There is a issue where if you try to put the dropdown submenu on the right it overlaps the text so set the class to navbar-right instead of just having it in the center and you will see it does not do it here but will for sure do it on your site.

If anyone runs into the solution for this please do help.

Jacob Ward () - 3 years ago - Reply 0


if your try to add the Submenus on the navbar-right class all the links go under the text no matter what. Anyone got a fix?....
I would really light to put the dropdown sub menu on the right side not in the center.

Jacob Ward () - 3 years ago - Reply 0


While using the code, right click on the submenu works but the left
click does not due to the data toggle and drop down classes for submenu
anchor links,

Add the below code when using bootstrap with WP, and it works...

$(document).ready(function(){

$("ul li:has(ul)>a ").addClass("dropdown-toggle");

$("ul li:has(ul)>a ").attr("data-toggle","dropdown");

$("ul li:has(ul) ul ").addClass("dropdown-menu multi-level");

$("ul ul li:has(ul) ").addClass("dropdown-submenu");

});

Mohammad Wasim Khan () - 4 years ago - Reply 0


when i add some more links on the navigation and open the sub menu it will goose under the browser on the right side

Nishant () - 4 years ago - Reply 0


add scroll on overflow ..

Yatish Kadam () - 2 years ago - Reply 0


Does not work

Mattias () - 4 years ago - Reply 0


To use on mobile, or with a click, juste add this JS :

$(document).ready( function() {
$("li.dropdown-submenu").on("click", function(){
$("li.dropdown-submenu").removeClass("active");
$(this).addClass("active");
return false;
});
});

And change the css ":hover" by

.dropdown-submenu.active>.dropdown-menu {
display: block;
}

.dropdown-submenu.active>a:after {
border-left-color: #fff;
}

trifail () - 5 years ago - Reply 0


I don't understand where this should be inserted. My apologies i'm new to web design and I hope someone can help and explain it to me.

Drew Schneider () - 3 years ago - Reply 0


There is a problem with the line "return false" all link are disabled ... help with that problem

Jonathan Rodriguez () - 4 years ago - Reply 0


I changed the script to this:
$(document).ready( function() {
$("li.dropdown-submenu > a").on("click", function(){
$("li.dropdown-submenu").removeClass("active");
$(this).parent().addClass("active");
return false;
});
});

And the submenu links work again.

Josh () - 4 years ago - Reply 0


Mobile click on a sub-menu opens, when you release the button, the menu closes.

Владимир Долгополов () - 3 years ago - Reply 0


I can't access anything below the first level of dropdown on my phone, any time I click "Dropdown" the "Menu 1" closes. Is there a fix for this?

scragar () - 5 years ago - Reply 0


yess check the first comment ... and follow the instructions carefully :D

Yatish Kadam () - 2 years ago - Reply 0


Hola, estoy comenzando con esto y me estoy teniendo porblemas para agregar el submenu, el codigo del css en que archivo lo agregaria? Lo que estoy haciendo es soltar el codigo al final del .css pero no me esta funcinando, hay que escribirlo de alguna manera? gracias

Juan () - 5 years ago - Reply 0


.dropdown-submenu {

position: relative;

}

.dropdown-submenu>.dropdown-menu {

top: 0;

left: 100%;

margin-top: -6px;

margin-left: -1px;

-webkit-border-radius: 0 6px 6px 6px;

-moz-border-radius: 0 6px 6px;

border-radius: 0 6px 6px 6px;

}

.dropdown-submenu.active>.dropdown-menu {

display: block;

}

.dropdown-submenu>a:after {

display: block;

content: " ";

float: right;

width: 0;

height: 0;

border-color: transparent;

border-style: solid;

border-width: 5px 0 5px 5px;

border-left-color: #ccc;

margin-top: 5px;

margin-right: -10px;

}

.dropdown-submenu.active>a:after {

border-left-color: #fff;

}

.dropdown-submenu.pull-left {

float: none;

}

.dropdown-submenu.pull-left>.dropdown-menu {

left: -100%;

margin-left: 10px;

-webkit-border-radius: 6px 0 6px 6px;

-moz-border-radius: 6px 0 6px 6px;

border-radius: 6px 0 6px 6px;

}

Jonathan Rodriguez () - 4 years ago - Reply 0