How to Implement a Navbar Dropdown Hover in Bootstrap V4

How to implement a Navbar Dropdown Hover in Bootstrap v4?

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>

How to implement a Navbar Dropdown Hover in Bootstrap v4 with Multi-levels Dropdown Submenu?

The solution:

//Dropdown hover
const $dropdown = $(".navbar-nav > .dropdown");
const $dropdownToggle = $(".navbar-nav > .dropdown > .dropdown-toggle");
const $dropdownMenu = $(".navbar-nav > .dropdown > .dropdown-menu");

const $dropdown2 = $(".dropdown-submenu");
const $dropdownToggle2 = $(".dropdown-submenu > .dropdown-toggle");
const $dropdownMenu2 = $(".dropdown-submenu > .dropdown-menu");

const showClass = "show";
$(window).on("load resize", function() {
    if (this.matchMedia("(min-width: 768px)").matches) {
        $dropdown.hover(
            function() {
                const $this = $(this);
                $this.addClass(showClass);
                $this.find($dropdownToggle).attr("aria-expanded", "true");
                $this.find($dropdownMenu).addClass(showClass);
            },
            function() {
                const $this = $(this);
                $this.removeClass(showClass);
                $this.find($dropdownToggle).attr("aria-expanded", "false");
                $this.find($dropdownMenu).removeClass(showClass);
            }
        );
        $dropdown2.hover(
            function() {
                const $this = $(this);
                $this.addClass(showClass);
                $this.find($dropdownToggle2).attr("aria-expanded", "true");
                $this.find($dropdownMenu2).addClass(showClass);
            },
            function() {
                const $this = $(this);
                $this.removeClass(showClass);
                $this.find($dropdownToggle2).attr("aria-expanded", "false");
                $this.find($dropdownMenu2).removeClass(showClass);
            }
        );
    } else {
        $dropdown.off("mouseenter mouseleave");
        $dropdown2.off("mouseenter mouseleave");

        $(function () {
            // Multi Level dropdowns on Click for Mobile
            $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function (event) {
                event.preventDefault();
                event.stopPropagation();

                $(this).siblings().toggleClass("show");

                if (!$(this).next().hasClass('show')) {
                    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
                }
                $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) {
                    $('.dropdown-submenu .show').removeClass("show");
                });

            });
        })
    }
});

Bootstrap Dropdown with Hover

The easiest solution would be in CSS. Add something like...

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}

Working Fiddle

Bootstrap 4 nav dropdown hover on desktop / click mobile

First create navbar hope u created after that

Submenu opening when hovering

First we need to figure out if the navbar is collapsed or not. The easiest way to do is to determine the window width. With a width lower then 768 pixel, it will collapse. So when the width is 768 or higher, we want the submenu to show when hovering, a effect which is usually trigger by a click. Let’s take this knowledge to a javascript function.

function toggleNavbarMethod() {  
    if ($(window).width() > 768) {  
        $('.navbar .dropdown').on('mouseover', function(){  
            $('.dropdown-toggle', this).trigger('click');   
        });  
    }  
}  

The submenu is now showing when hovering the parent menu item. Hovering out doesn’t close the submenu, a feature we want. That means we need to add some functionality to the hover out event.

function toggleNavbarMethod() {  
    if ($(window).width() > 768) {  
        $('.navbar .dropdown').on('mouseover', function(){  
            $('.dropdown-toggle', this).trigger('click');   
        }).on('mouseout', function(){  
            $('.dropdown-toggle', this).trigger('click').blur();  
        });  
    }  
}  

This will trigger a click event once more when hover out. As a second click closes the submenu, we simulate this behavior. Also we want to get rid of the focus on the parent menu item. Therefor I added the blur();. But when the width is lower then 768 pixels, we need to fall back to the original “click to open” method. So lets remove the mouseover and mouseout event listeners.

function toggleNavbarMethod() {  
    if ($(window).width() > 768) {  
        $('.navbar .dropdown').on('mouseover', function(){  
            $('.dropdown-toggle', this).trigger('click');   
        }).on('mouseout', function(){  
            $('.dropdown-toggle', this).trigger('click').blur();  
        });  
    }  
    else {  
        $('.navbar .dropdown').off('mouseover').off('mouseout');  
    }  
}  

The navbar is fully functional and opens the submenu’s when hovering it’s parent as long as the navbar isn’t collapsed.

Determining submenu behavior when resizing the window

But what if the user resizes his window? The navbar submenu behavior needs to be determined again. We can do that by adding a resize event listener.

$(window).resize(toggleNavbarMethod);

The last thing we need to do, is to activate the script and bind the resize listener.

The Final Script

$(document).ready(function() {  
    function toggleNavbarMethod() {  
        if ($(window).width() > 768) {  
            $('.navbar .dropdown').on('mouseover', function(){  
                $('.dropdown-toggle', this).trigger('click');   
            }).on('mouseout', function(){  
                $('.dropdown-toggle', this).trigger('click').blur();  
            });  
        }  
        else {  
            $('.navbar .dropdown').off('mouseover').off('mouseout');  
        }  
    }  
    toggleNavbarMethod();  
    $(window).resize(toggleNavbarMethod);  
}); 

Here Is Example

$(document).ready(function() {      function toggleNavbarMethod() {          if ($(window).width() > 768) {              $('.navbar .dropdown').on('mouseover', function(){                  $('.dropdown-toggle', this).trigger('click');               }).on('mouseout', function(){                  $('.dropdown-toggle', this).trigger('click').blur();              });          }          else {              $('.navbar .dropdown').off('mouseover').off('mouseout');          }      }      toggleNavbarMethod();      $(window).resize(toggleNavbarMethod);  }); 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>      <nav class="navbar navbar-expand-md navbar-light bg-light">    <a href="#" class="navbar-brand">Brand</a>    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">        <span class="navbar-toggler-icon"></span>    </button>
    <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">        <div class="navbar-nav">            <a href="#" class="nav-item nav-link active">Home</a>            <a href="#" class="nav-item nav-link">Profile</a>            <div class="nav-item dropdown">                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>                <div class="dropdown-menu">                    <a href="#" class="dropdown-item">Inbox</a>                    <a href="#" class="dropdown-item">Sent</a>                    <a href="#" class="dropdown-item">Drafts</a>                </div>            </div>        </div>        <form class="form-inline">            <div class="input-group">                                    <input type="text" class="form-control" placeholder="Search">                <div class="input-group-append">                    <button type="button" class="btn btn-secondary"><i class="fa fa-search"></i></button>                </div>            </div>        </form>        <div class="navbar-nav">            <a href="#" class="nav-item nav-link">Login</a>        </div>    </div></nav>

Dropdown on hover in Bootstrap 4.1

Are you looking for this?

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

<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" /><div class="navbar-collapse text-center" id="navbarResponsive">  <ul class="navbar-nav ml-auto">
    <li class="nav-item dropdown">      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">      main menu    </a>      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">        <a class="dropdown-item" href="#">A</a>        <a class="dropdown-item" href="#">B</a>        <a class="dropdown-item" href="#">C</a>        <a class="dropdown-item" href="#">D</a>      </div>    </li>
    <button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>
  </ul></div>

---

Related Topics