344

Bootstrap 3 is still at RC, but I was just trying to implement it. I couldn't figure out how to put a sub menu class. Even there is no class in css and even the new docs don't say anything about it

It was there in 2.x with class name as dropdown-submenu

4
  • 2
    Remeber that some components have changed in version 3, including menu, navs and modals. Aug 2, 2013 at 18:21
  • 11
    the lack of native support for this (imho) useful feature in BS3 is one of the main reasons I haven't switched over yet. while I agree it isn't as useful in mobile, and they have a 'mobile first' approach now, it seems shortsighted to remove a feature they already implemented, that is VERY useful on the desktop Feb 6, 2014 at 7:34
  • 4
    Agreed that it's short-sighted to remove expected functionality. This kind of breaking change gives enterprise developers a bad day.
    – RJB
    Jul 14, 2014 at 3:06
  • To make a dropdown just use css codepen.io/Gothburz/pen/GpJKqP Oct 24, 2015 at 23:42

11 Answers 11

601

Bootstrap 5 (update 2023)

Add some JavaScript to prevent the submenu from closing when the parent dropdown is open. This can be done be toggle display:block...

let dropdowns = document.querySelectorAll('.dropdown-toggle')
dropdowns.forEach((dd)=>{
    dd.addEventListener('click', function (e) {
        var el = this.nextElementSibling
        el.style.display = el.style.display==='block'?'none':'block'
    })
})

Bootstrap 5 Multi-level Dropdown - click
Bootstrap 5 Multi-level Dropdown - hover
Bootstrap 5 Multi-level Dropdown - hover & animate transition

Or, you can use this CSS only method for Navbar dropdowns...

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

Bootstrap 5 Navbar Dropdown Hover Submenus (CSS only)


Bootstrap 4 (update 2018)

The dropdown-submenu has been removed in Bootstrap 3 RC. In the words of Bootstrap author Mark Otto..

"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342

But, with a little extra CSS you can get the same functionality.

navbar submenu on hover:

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

Navbar submenu dropdown hover
Navbar submenu dropdown hover (right aligned)
Navbar submenu dropdown click (right aligned)
Navbar dropdown hover (no submenu)


Bootstrap 3

Here is an example that uses 3.0 RC 1: http://bootply.com/71520

Here is an example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684

CSS

.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 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.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:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.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;
}

Sample Markup

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

P.S. - Example in navbar that adjusts left position: http://bootply.com/92442

15
  • 5
    Yeah Thanks I have added it my theme's stylesheet, just copy pasted from old version of bootstrap wordpress.org/themes/bikaner
    – DevC
    Aug 31, 2013 at 19:08
  • 8
    For example bootply.com/86684, add the following line in css for correct background hover of parent menu item when displaying submenu: .dropdown-submenu:hover {background: #e2e1e1;} Jan 22, 2014 at 18:13
  • 1
    Works with 3.1.1 as well. Many thanks for the solution. I was beating my head against the wall trying to alter the bootstrap.js file to work properly. Apr 29, 2014 at 14:12
  • 2
    I'm all about trying to simplify things as much as possible but there is a need for this on large websites with no way around multiple levels of navigation (such as government websites). Dec 19, 2017 at 14:30
  • 1
    Submenu disappear even before I can move the mouse to it, so hovering isn't working! It not hover, relying on click, it works OK, though.
    – Polv
    Jul 29, 2018 at 17:07
63

@skelly solution is good but will not work on mobile devices as the hover state won't work.

I have added a little bit of JS to get the BS 2.3.2 behavior back.

PS: it will work with the CSS you get there: http://bootply.com/71520 though you can comment the following part:

CSS:

/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  // Avoid following the href location when clicking
  event.preventDefault();
  // Avoid having the menu to close when clicking
  event.stopPropagation();
  // If a menu is already open we close it
  $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
  // opening the one you clicked on
  $(this).parent().addClass('open');
});

The result can be found on my WordPress theme (Top of the page): http://shprinkone.julienrenaux.fr/

2
  • 2
    This solution doesn't account for wanting to keep hover functionality when on desktop and it also doesn't work for the second level of submenu. In order for this to work for more levels of submenus change the last two lines to the following line: $(this).closest(".dropdown-submenu").toggleClass("open");, which will open/close the links menu items. In order to keep hover on desktop a check on the browsers viewport width is necessary and will differ for each site.
    – edhedges
    Nov 19, 2015 at 18:12
  • thanks for your code. but in mobile phone your code has bug.
    – jian dan
    Apr 6, 2017 at 3:34
44

Until today (9 jan 2014) the Bootstrap 3 still not support sub menu dropdown.

I searched Google about responsive navigation menu and found this is the best i though.

It is Smart menus http://www.smartmenus.org/

I hope this is the way out for anyone who want navigation menu with multilevel sub menu.

update 2015-02-17 Smart menus are now fully support Bootstrap element style for submenu. For more information please look at Smart menus website.

6
  • I was having trouble trying to get bootstrap to hover on PC, and click on tablet with multiple levels. You just made my day! Works beautifully - Uses pretty much the same markup as bootstrap. Thank you! :)
    – Hippie
    Jan 24, 2014 at 1:29
  • 2
    This solution is free, open source and work very well with BootStrap 3. Mar 31, 2014 at 22:23
  • 5
    Amazing! Easy! For specific details on Bootstrap 3 integration, see here: vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html
    – manafire
    Jul 2, 2014 at 21:20
  • 2
    Smartmenus is nice, however it only works with navbars, not with simple button dropdowns. Sep 12, 2014 at 13:14
  • This solves the problem, makes the menus hover and touch compatible, and requires only the default Bootstrap 3 HTML markup. < Great solution, transparent and fast to implement!
    – Jpsy
    Dec 9, 2014 at 12:26
8

With Bootstrap 5, it's now very easy to implement dropdown submenu without using any javascript code thanks to the new autoClose option and dropend class.

Live demo: https://jsfiddle.net/b038kc2y/

.dropdown-menu .dropdown-menu {
  top: -.5rem !important;
}
<div class="dropdown m-5">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Dropdown link
  </a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li class="dropend">
      <a class="dropdown-item" href="#" id="dropdownSubMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Submenu Action</a>
      <ul class="dropdown-menu" aria-labelledby="dropdownSubMenuLink">
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </li>
  </ul>
</div>
4
  • 3
    You dont need to use the css. Just add the dropend class to the first li. Look at jsfiddle.net/tmedxnLq Jan 16, 2022 at 17:23
  • That worked for me, thanks!
    – MertHaddad
    Apr 18, 2022 at 8:44
  • This doesn't seem to work if you go more than one level deep.
    – dearsina
    Jun 28, 2022 at 11:28
  • @chrisFrisina clicking a sub-menu item only closes submenu, but not the whole menu as one would expect.
    – z-boss
    Nov 8, 2022 at 19:14
5

Shprink's code helped me the most, but to avoid the dropdown to go off-screen i updated it to:

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $(this).parent().addClass('open');

    var menu = $(this).parent().find("ul");
    var menupos = $(menu).offset();

    if (menupos.left + menu.width() > $(window).width()) {
        var newpos = -$(menu).width();
        menu.css({ left: newpos });    
    } else {
        var newpos = $(this).parent().width();
        menu.css({ left: newpos });
    }

});

CSS: FROM background-color: #eeeeee TO background-color: #c5c5c5 - white font & light background wasn't looking good.

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #c5c5c5;
  border-color: #428bca;
}

I hope this helps people as much as it did for me!

But i hope Bootstrap add the subs feature back ASAP.

0
4

Comment to Skelly's really helpful workaround: in Bootstrap-sass 3.3.6, utilities.scss, line 19: .pull-left has float:left !important. Since that, I recommend to use !important in his CSS as well:

.dropdown-submenu.pull-left {
    float:none !important;
}
2

I bumped with this issue a few days ago. I tried many solutions and none really worked for me on the end i ended up creating an extenion/override of the dropdown code of bootstrap. It is a copy of the original code with changes to the closeMenus function.

I think it is a good solution since it doesn't affects the core classes of bootstrap js.

You can check it out on gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

0
0

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown Navbar</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">The Providers</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li ><a href="#">Home</a></li>
        <li  id="course" class="dropdown" ><a  href="#">Courses<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">SEO</a></li>
          <li><a href="#">A.I</a></li>
          <li><a href="#">M.L</a></li>
          <li><a href="#">Graphics</a></li>
          <li id="sub-dropdown" class="dropdown"><a href="#">web Design<span style="margin-left: 43px;" class="glyphicon glyphicon-chevron-right"></span> </a>
        <ul id="sub-dropdown-menu" class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">Bootstrap 3</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">Angular</a></li>
        </ul>
      </li>
          </li>
        </ul>
      </li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Policy</a></li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html>

CSS

body{
    font-family: monospace;
    outline: none;
    background-image: url(image.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}
.navbar-inverse{
    background-color: #2a84eb ;
    border-color: transparent;
}

.navbar-inverse .navbar-brand{
    color: #fff;
    font-size: 30px;
    margin-right: 40px;
}

#myNavbar .navbar-nav li a{
    color: #fff;
    font-size: 19px;
}
#myNavbar #course{
    transition: all 0.3s ease-in-out;
}
#myNavbar #course:hover{
    background-color:#0751a6; 
}   
.dropdown-menu{
  display: none;
  position: absolute;
  background-color: #f0f0f0;
  box-shadow: 2px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

#sub-dropdown-menu{
display: none;
  position: absolute;
  background-color: #f0f0f0;
  margin-left: 186px;
  margin-top: -26px;
}

#sub-dropdown-menu a , .dropdown-menu a {
    color: #000 !important;
    font-size: 16px !important;
}

.dropdown:hover .dropdown-menu {display: block;transition: all 0.5s ease-in-out;}

.dropdown .dropdown-menu a:hover{background-color: #c9c7c7;}

#sub-dropdown:hover #sub-dropdown-menu {display: block;}

Source: https://www.youtube.com/watch?v=6CgnWhJ-amE

0

In 2022 for Bootstrap 5, this JS code at this GitHub repo is the ultimate solution for submenus: https://github.com/dallaslu/bootstrap-5-multi-level-dropdown.

0

This is my solution (I use bootstrap 5):

HTML

<div class="btn-group dropend" role="group">
    <button id="submenu" type="button" class="dropdown-item  dropdown-toggle submenu" data-bs-toggle="dropdown" aria-expanded="false">
        Menu Item
    </button>
    <div class="dropdown-menu" aria-labelledby="submenu">
        <a class="dropdown-item">Submenu</a>
    </div>
</div>

JS

$('.submenu').click(function(e){
    e.preventDefault();
    e.stopPropagation();
});
-2

I make another solution for dropdown. Hope this is helpfull Just add this js script

<script type="text/javascript"> jQuery("document").ready(function() {
  jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (jQuery(this).hasClass('open2'))
      jQuery(this).removeClass('open2');
    else {
      jQuery(this).addClass('open2');
    }

  });
}); < /script>

<style type="text/css">.open2{display:block; position:relative;}</style>

Not the answer you're looking for? Browse other questions tagged or ask your own question.