Dropdown menu

Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js which contains Popper.js.

css class	description
dropdown	Specifies the container for the dropdown menu. There are variations to other sides dropup dropend (dropright in v4.x) dropstart (dropleft in v4.x)
dropdown-toggle	Element to toggle menu. Element must have attribute data-bs-toggle="dropdown" (data-toggle="dropdown" in v4.x).
dropdown-toggle-split	Splits arrow and dropdown.
dropdown-menu	Specifies the container for the dropdown items. This element should have the aria-labelledby that references to dropdown id. You can use div, nav, ul elements.
dropdown-menu-dark	Dark theme for dropdown menu, can be applied to the dropdown-menu element.
dropdown-menu-right	Aligns the items to the right of the dropdown. This class can be applied to a container for dropdown items.
dropdown-item	Specifies the dropdown item. You can use <button> or <a> elements.
dropdown-header	Specifies header of dropdown menu.
dropdown-divider	Specifies divider.

Code example

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle"
  type="button" 
  id="dropdownMenuButton1" 
  data-bs-toggle="dropdown" 
  aria-expanded="false">
    Dropdown button
  </button>
  <nav class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <a class="dropdown-item" href="#" onclick="">Open</a>
    <a class="dropdown-item" href="#" onclick="">Save</a>
    <a class="dropdown-item disabled" href="#">Export</a>
    <div class="dropdown-divider"></div>  
    <a class="dropdown-item" href="#"onclick="">Share</a> 
  </nav>
</div>

You can show dropdown manually via JavaScript.

// data-toggle="dropdown" attribute still required
 $(".dropdown-toggle").dropdown("toggle");

The support for sub-menu was disabled in latest version of bootstrap. The option can be re-enabled by including a small CSS.

Code example

<style>
.dropdown-menu .dropdown-menu {
	top: auto;
	left: 100%;
	transform: translateY(-2rem);
}
.dropdown-item + .dropdown-menu {
	display: block;
	opacity: 0;
	transition: opacity .3s 1s;
}
.dropdown-item.submenu::after {
	content: '▸';
	margin-left: 0.5rem;
}
.dropdown-item:hover + .dropdown-menu,
.dropdown-menu:hover {
	opacity: 1;
	transition: opacity .3s .1s;
}
</style>
<div class="dropdown show ml-3">
    <button class="btn btn-secondary dropdown-toggle" 
            type="button" 
             data-bs-toggle="dropdown" 
            >
	    File
    </button>
    <nav class="dropdown-menu">
       <a class="dropdown-item" href="#">Open</a>
       <a class="dropdown-item" href="#">Save</a>
       <a class="dropdown-item submenu" href="#">Export</a>
       <div class="dropdown-menu">
           <a class="dropdown-item" href="#">to jpg</a>
           <a class="dropdown-item" href="#">android icons</a>
       </div>
     </nav>
</div>

events

All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element.

event name	description
show.bs.dropdown	Fires immediately when the show() method is called.
shown.bs.dropdown	Fires when the dropdown has been made visible to the user.
hide.bs.dropdown	Fires immediately when the hide() method has been called.
hidden.bs.dropdown	Fires when the dropdown has finished being hidden from the user.

Usage with jQuery:

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Web frontend

Web backend

JVM

JS

Programming

Mobiles

Graphics

Others

Bootstrap tutorial

Dropdown menu

nested menu, submenus

events