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

You can show dropdown manually via JavaScript.

// data-toggle="dropdown" attribute still required

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.

Code example


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…