"Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-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> <a href="http://fontenele.github.io/bootstrap-navbar-dropdowns/">Github</a> </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 () - 8 years ago - Reply 0


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 () - 8 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 () - 9 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 () - 9 years ago - Reply 0


Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

robbrandt () - 2 years ago - Reply 0


Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

robbrandt () - 2 years ago - Reply 0


Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

robbrandt () - 2 years ago - Reply 0


Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

robbrandt () - 2 years ago - Reply 0


Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

robbrandt () - 2 years ago - Reply 0


Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

robbrandt () - 2 years ago - Reply 0


Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

robbrandt () - 2 years ago - Reply 0


Hello

Your Bootstrap 4 Navbar is very fine.

I have some difficulty in changing the different colors, text, text background.

thank you for your indications

Yves Accard

yaccard () - 4 years ago - Reply 0


to make the link open in new page, slight changes on the li item (laravel blade template) to include new class named as 'nestedmenu' :

<li><a href="{{ url('myurl') }}" class="dropdown-item nav-link nestedmenu"><i class="fa fa-mygreaticon fa-fw"></i>MyPage</a></li>

then in scripts :

$('.nestedmenu').on('click', function (e) {

e.preventDefault();

var url = $(this).attr('href');

window.open(url, '_blank');

});

herrygallery () - 4 years ago - Reply 0


links with this code doesn't work.

pedramham () - 4 years 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 () - 8 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 () - 8 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 () - 8 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 () - 8 years ago - Reply 0


add scroll on overflow ..

Yatish Kadam () - 7 years ago - Reply 0


Does not work

Mattias () - 8 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 () - 9 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 () - 7 years ago - Reply 0


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

Jonathan Rodriguez () - 9 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 () - 9 years ago - Reply 0


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

Владимир Долгополов () - 8 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 () - 9 years ago - Reply 0


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

Yatish Kadam () - 7 years ago - Reply 0