Bootstrap navbar dropdown with hover effect
Get 700+ Material components for the latest Bootstrap 5 for free. This component is also
available as ready-to-use solution in MDB UI Kit.
Learn more about Bootstrap Dropdown here, or
download MDB Free version with 700+ components here.
How to show dropdowns with hover effect? Most front-end developers prefer to show dropdown when mouse hovers on it.
Steps to create simple hover navbar
- It is better to create hover effect only for desktop screens. Use media query
@media all and (min-width: 992px) { // CSScode } - Hide dropdown menu by adding
display:none. - Add pseudo-class
:hoverto nav-item and add classdisplay:block - Note: bootstrap has
margin-topondropdown-menuelements. Remove it by adding margin-top:0
Solution 1. With plain HTML/CSS
This file contains bidirectional Unicode text that may be interpreted or compiled
differently than what appears below. To review, open the file in an editor that reveals
hidden Unicode characters.
Learn more about bidirectional
Unicode characters
| <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> | |
| <div class="container-fluid"> | |
| <a class="navbar-brand" href="#">Brand</a> | |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="main_nav"> | |
| <ul class="navbar-nav"> | |
| <li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li> | |
| <li class="nav-item"><a class="nav-link" href="#"> About </a></li> | |
| <li class="nav-item"><a class="nav-link" href="#"> Services </a></li> | |
| <li class="nav-item dropdown"> | |
| <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Hover me </a> | |
| <ul class="dropdown-menu"> | |
| <li><a class="dropdown-item" href="#"> Submenu item 1</a></li> | |
| <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li> | |
| <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> <!-- navbar-collapse.// --> | |
| </div> <!-- container-fluid.// --> | |
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled
differently than what appears below. To review, open the file in an editor that reveals
hidden Unicode characters.
Learn more about bidirectional
Unicode characters
| /* ============ desktop view ============ */ | |
| @media all and (min-width: 992px) { | |
| .navbar .nav-item .dropdown-menu{ display: none; } | |
| .navbar .nav-item:hover .nav-link{ } | |
| .navbar .nav-item:hover .dropdown-menu{ display: block; } | |
| .navbar .nav-item .dropdown-menu{ margin-top:0; } | |
| } | |
| /* ============ desktop view .end// ============ */ |
Also it is possible to make dropdown hover effect with vanilla js
Solution 2. With Javascript mouseover method
This file contains bidirectional Unicode text that may be interpreted or compiled
differently than what appears below. To review, open the file in an editor that reveals
hidden Unicode characters.
Learn more about bidirectional
Unicode characters
| document.addEventListener("DOMContentLoaded", function(){ | |
| // make it as accordion for smaller screens | |
| if (window.innerWidth > 992) { | |
| document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){ | |
| everyitem.addEventListener('mouseover', function(e){ | |
| let el_link = this.querySelector('a[data-bs-toggle]'); | |
| if(el_link != null){ | |
| let nextEl = el_link.nextElementSibling; | |
| el_link.classList.add('show'); | |
| nextEl.classList.add('show'); | |
| } | |
| }); | |
| everyitem.addEventListener('mouseleave', function(e){ | |
| let el_link = this.querySelector('a[data-bs-toggle]'); | |
| if(el_link != null){ | |
| let nextEl = el_link.nextElementSibling; | |
| el_link.classList.remove('show'); | |
| nextEl.classList.remove('show'); | |
| } | |
| }) | |
| }); | |
| } | |
| // end if innerWidth | |
| }); | |
| // DOMContentLoaded end |
Back to all examples