animation-lg Created with Sketch.

Bootstrap Menu
Hover template

Free menu on hover template for your projects, built with the latest Bootstrap, HTML, CSS & JavaScript. MIT Licensed - free for personal & commercial use.

edit & download Live preview
  • License
    MIT License
  • Free for commercial use?
    Yes
  • Bootstrap version
    5.2.3+
  • NPM downloads
    npm
  • GitHub stars
    GitHub Repo stars

Support by sharing & help to keep it free:

Dev sharing button Twitter sharing button Facebook sharing button LinkedIn sharing button Pinterest sharing button Reddit sharing button Stumbleupon sharing button

Bootstrap navbar dropdown with hover animation 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.

By default bootstrap 5 does not support hover. But most developers prefer to show dropdown on hover state with animation. When you hover over dropdown item, it dropdown-submenu fades up or fades down with animation.

Steps to create bootstrap navbar hover animation menu
  • It is better to create hover effect only for desktop screens. That's why we use Media query. @media all and (min-width: 992px) { // CSScode }
  • Add display:block; to dropdown-menu
  • Hide dropdown-menu with opacity: 0; visibility: hidden; and change position before it appears, for ex top:250%; or add transform
  • Now make menu visible when mouse hovers on nav-item by changing opacity:1; visibility:visible;
  • Change final position to top:100%; when mouse hovers on nav-item. Add some transition
  • Note: bootstrap has margin-top on dropdown-menu elements. Remove it by adding margin-top:0
Here are basic code examples

Back to all examples

Get more free tools & themes

Join the newsletter to receive more free templates - including Instagram, Facebook or Amazon clone templates, as well as multiple free tools & resources.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Privacy Policy