How to implement a Navbar Dropdown Hover in Bootstrap v4?

Question

I am a bit confused on the new bootstrap version since they changed dropdown menus to divs:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">   <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">     <span class="navbar-toggler-icon"></span>   </button>   <a class="navbar-brand" href="#">Navbar</a>   <div class="collapse navbar-collapse" id="navbarNavDropdown">     <ul class="navbar-nav">       <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="#">Features</a>       </li>       <li class="nav-item">         <a class="nav-link" href="#">Pricing</a>       </li>       <li class="nav-item dropdown">         <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">           Dropdown link         </a>         <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">           <a class="dropdown-item" href="#">Action</a>           <a class="dropdown-item" href="#">Another action</a>           <a class="dropdown-item" href="#">Something else here</a>         </div>       </li>     </ul>   </div> </nav> 

Do you guys have any idea to get a hover dropdown in the Dropdown link in that snippet without adding additional script code (only css and script from bootstrap)? I already saw the bootstrap css classes and I can't relate with the ones in bootstrap V3 (I accomplish this without adding jquery in V3).

Answer 1

Simple, CSS only solution:

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

When clicked, it will still get the class show toggled to it (and will remain open when no longer hovered).

---

To get around this properly is to use events and properties reserved to pointer based devices: jQuery's mouseenter, mouseleave and :hover. Should work smoothly, intuitively, while not interfering at all with how the dropdown works on touch based devices. Try it out, let me know if it works for you:

Complete jQuery solution (touch untouched):

Pre v4.1.2 solution (deprecated):

$('body').on('mouseenter mouseleave','.dropdown',function(e){   var _d=$(e.target).closest('.dropdown');   if (e.type === 'mouseenter')_d.addClass('show');   setTimeout(function(){     _d.toggleClass('show', _d.is(':hover'));     $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));   },300); }); 

$('body').on('mouseenter mouseleave','.dropdown',function(e){    var _d=$(e.target).closest('.dropdown');    if (e.type === 'mouseenter')_d.addClass('show');    setTimeout(function(){      _d.toggleClass('show', _d.is(':hover'));      $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));    },300);  });    /* this is not needed, just prevents page reload when a dd link is clicked */  $('.dropdown a').on('click tap', e => e.preventDefault())

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">    <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">      <span class="navbar-toggler-icon"></span>    </button>    <a class="navbar-brand" href>Navbar</a>    <div class="collapse navbar-collapse" id="navbarNavDropdown">      <ul class="navbar-nav">        <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>Features</a>        </li>        <li class="nav-item">          <a class="nav-link" href>Pricing</a>        </li>        <li class="nav-item dropdown">          <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">            Dropdown link          </a>          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">            <a class="dropdown-item" href>Action</a>            <a class="dropdown-item" href>Another action</a>            <a class="dropdown-item" href>Something else here</a>          </div>        </li>      </ul>    </div>  </nav>

---

v4.1.2 shiplist introduced this change to how dropdowns work, making the solution above no longer work.
Here's the up to date solution for having the dropdown open on hover in v4.1.2 and above:

function toggleDropdown (e) {   const _d = $(e.target).closest('.dropdown'),     _m = $('.dropdown-menu', _d);   setTimeout(function(){     const shouldOpen = e.type !== 'click' && _d.is(':hover');     _m.toggleClass('show', shouldOpen);     _d.toggleClass('show', shouldOpen);     $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);   }, e.type === 'mouseleave' ? 300 : 0); }  $('body')   .on('mouseenter mouseleave','.dropdown',toggleDropdown)   .on('click', '.dropdown-menu a', toggleDropdown); 

function toggleDropdown (e) {    const _d = $(e.target).closest('.dropdown'),        _m = $('.dropdown-menu', _d);    setTimeout(function(){      const shouldOpen = e.type !== 'click' && _d.is(':hover');      _m.toggleClass('show', shouldOpen);      _d.toggleClass('show', shouldOpen);      $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);    }, e.type === 'mouseleave' ? 300 : 0);  }    $('body')    .on('mouseenter mouseleave','.dropdown',toggleDropdown)    .on('click', '.dropdown-menu a', toggleDropdown);    /* not needed, prevents page reload for SO example on menu link clicked */  $('.dropdown a').on('click tap', e => e.preventDefault())

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>    <nav class="navbar navbar-expand-lg navbar-light bg-light">    <a class="navbar-brand" href="#">Navbar</a>    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">      <span class="navbar-toggler-icon"></span>    </button>      <div class="collapse navbar-collapse" id="navbarSupportedContent">      <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="#">Link</a>        </li>        <li class="nav-item dropdown">          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">            Dropdown          </a>          <div class="dropdown-menu" aria-labelledby="navbarDropdown">            <a class="dropdown-item" href="#">Action</a>            <a class="dropdown-item" href="#">Another action</a>            <div class="dropdown-divider"></div>            <a class="dropdown-item" href="#">Something else here</a>          </div>        </li>        <li class="nav-item">          <a class="nav-link disabled" href="#">Disabled</a>        </li>      </ul>      <form class="form-inline my-2 my-lg-0">        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>      </form>    </div>  </nav>

---

Important note: If using the jQuery solution, it is important to remove the CSS one (or the dropdown won't close when .dropdown-toggle is clicked or when an menu option is clicked).

Answer 2

Just Add this simple css code in your style-sheet and you are ready to go.

.dropdown:hover > .dropdown-menu {     display: block; } .dropdown > .dropdown-toggle:active {     /*Without this, clicking will make it sticky*/     pointer-events: none; }