Bootstrap tutorial

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
  • dropright
  • dropleft
dropdown-toggle Adds a down arrow to the dropdown.
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.
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.
dropdown-header Specifies header of dropdown menu.
dropdown-divider Specifies divider.

You can use <button> or <a> elements for a dropdown menu. If you want the <a> dropdown to look like a button, add classes like btn and btn-secondary as in the example below.

Similarly you can use <button> or <a> elements for a dropdown items.

Bootstrap does not natively support submenus. You need to use third party plugins or implement yourself.

Example
my header
Open Save Export
Share 
<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" 
     id="dropdownMenu1" 
     role="button"   data-toggle="dropdown"     
     aria-haspopup="true" aria-expanded="false">File</a>

  <div class="dropdown-menu" aria-labelledby = "dropdownMenu1">
      <h6 class="dropdown-header">my header</h6>
      <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> 
  </div>
</div>

You can show dropdown manually via JavaScript.

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

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…
})

nested menu, submenus

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

Example
Open Save Export
to jpg android icons 
<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-toggle="dropdown">
	    File
    </button>
    <div 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>
     </div>
</div>