Bootstrap navbar’s dropdown menu on Hover

Bootstrap is the most popular front-end framework. It’s a sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development. It’s a free and open-source front-end framework. It’s written in HTML, CSS, Sass, and JavaScript under MIT License. Currently, most front-end developers use it for their projects.

The dropdown menu shows on click event by default in Bootstrap. But, sometimes we need it on hover especially when we are designing and developing websites. In this article, I’ll walk you through the process of changing the drop-down menu’s behavior so that it shows on hover rather than on click. Either CSS or JavaScript can be used to change the behavior of the dropdown menu in the Bootstrap navbar. I will show you both CSS and JavaScript to change the behavior of the dropdown menu.

Create a Bootstrap navbar with a dropdown menu in HTML

At first, we need to create a navbar HTML structure with a dropdown menu. We will use the same HTML structure for both CSS and JavaScript examples. Just write the below codes into an HTML file. To get more info for Bootstrap Navbar, please visit the official documentation.

<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

In the example above, the <li> element with a class of “dropdown” contains a nested <a> element with a class of “dropdown-toggle“. This is what triggers the dropdown menu. It also contains an <div> element with a class of “dropdown-menu“, which contains the actual dropdown items.

Bootstrap Dropdown menu on hover with CSS

Showing the Bootstrap dropdown menu on hover with CSS is the simplest way to show the dropdown menu. Just add below CSS code and it will work perfectly.

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

We made it but still it’s not fancy as it should be. Now the dropdown menu is showing without any animation. Let’s add a CSS animation to the menu.

.dropdown-menu {
  animation: slideUp 0.3s ease-in-out;
}

@keyframes slideUp {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

We are using slideUp animation here. You can change it to your own or experiment with it for your needs. So below preview will be the final output of the Bootstrap dropdown menu on hover with CSS.

Bootstrap dropdown menu on hover with JavaScript

You already know how to make a Bootstrap dropdown menu on hover with CSS. Now, you will learn how to make a Bootstrap dropdown menu on hover with JavaScript. To display the Bootstrap dropdown menu on hover with JavaScript, we will use jQuery. Just write bellow JavaScript code and your Bootstrap dropdown menu will start work on hover.

(function($) {
	"use strict";
  
  // Dropdown on Hover
  $('.dropdown').hover(
    function () {
      $(this).find('> .dropdown-toggle').addClass('show');
      $(this).find('> .dropdown-toggle').attr('aria-expanded', 'true');
      $(this).find('> .dropdown-menu').addClass('show');
    },
    function() {
      $(this).find('> .dropdown-toggle').removeClass('show');
      $(this).find('> .dropdown-toggle').attr('aria-expanded', 'false');
      $(this).find('> .dropdown-menu').removeClass('show');
    }
  );
  // Dropdown on Hover End
})(jQuery);

Now Bootstrap dropdown menu is showing on hover. But, JavaScript also doesn’t have animation. To add animation to the dropdown menu, we will use the same code we used in CSS. Just below CSS and it will be a smooth slide up animation.

.dropdown-menu {
  animation: slideUp 0.3s ease-in-out;
}

@keyframes slideUp {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

Here is the final preview of the Bootstrap dropdown menu on hover with JavaScript. Full code available at Codepen. Fork it and customize it to your needs.

I have shown you both ways to display the Bootstrap dropdown menu on hover. Both are almost the same. Just 1 difference, JavaScript is changing the accessibility attribute aria-expanded. Now play with it.