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
|
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.
<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.
<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>