❤
npm
Sign UpSign In

bootstrap-dropdown-on-hover

1.0.0 • Public • Published

Dropdown on hover

Responsive Dropdown on hover built with Bootstrap 5. Example of how to make dropdown expand when you hover over it.

Check out Bootstrap Dropdown on hover Documentation for detailed instructions & even more examples.

Basic example

Add CSS that makes the dropdown-menu expand when hovering over a dropdown element.

<div class="dropdown">
  <button
    class="btn btn-primary dropdown-toggle"
    type="button"
    id="dropdownMenuButton"
    data-mdb-toggle="dropdown"
    aria-expanded="false"
  >
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>
.dropdown:hover>.dropdown-menu {
  display: block;
}

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

How to use?

  1. Download MDB - free UI KIT

  2. Choose your favorite customized component and click on the image

  3. Copy & paste the code into your MDB project

▶️ Subscribe to the YouTube channel for web development tutorials & resources

More extended Bootstrap documentation

Readme

Keywords

Package Sidebar

Install

npm i bootstrap-dropdown-on-hover

Repository

github.com/mdbootstrap/bootstrap-dropdown-on-hover

Homepage

mdbootstrap.com/docs/standard/extended/dropdown-on-hover/

Weekly Downloads

0

Version

1.0.0

License

ISC

Unpacked Size

6.47 MB

Total Files

387

Last publish

Collaborators

  • piotrgusciora
Try on RunKit
Report malware