❤
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

/bootstrap-dropdown-on-hover/

    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

    1

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    6.47 MB

    Total Files

    387

    Last publish

    Collaborators

    • piotrgusciora
    Try on RunKit
    Report malware