Bulma is a free and open-source CSS framework used to build beautiful and responsive websites. The Bulma Dropdown menu is a list that displays various options when the user interacts with the menu.
This interaction takes place usually when the user clicks or hovers on the menu. It is important to have an interactive dropdown menu as it makes your website look better. The Bulma Dropdown menu is easy to use and highly interactive. There are a few dropdown elements used in the Bulma framework in order to create a Dropdown menu.
Bulma Dropdown Menu Classes:
-
dropdown: It is the class for the main container that contains the dropdown button and the dropdown menu.
- dropdown-trigger: It is the class for the container that contains the button
-
dropdown-menu: It is the class for the menu that can be toggled. It is not visible by default.
-
dropdown-content: It is the class that specifies the dropdown box with a white background.
- dropdown-item: It is the class for every item of the dropdown.
- dropdown-divider: It is the class for the horizontal line that divides the dropdown items.
-
dropdown-content: It is the class that specifies the dropdown box with a white background.
Syntax:
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"> ....</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<a class="dropdown-item"> Item 1...</a>
<a class="dropdown-item">Item 2...</a>
....
</div>
</div>
</div>Example: The below example shows the use of dropdown menu classes in Bulma.
<!DOCTYPE html><html>
<head>
<title>Bulma Dropdown Menu</title>
<link rel='stylesheet'
href=
<script src=
</script>
</head>
<body class="has-text-centered">
<h3 class="is-size-2 has-text-success">
GeeksforGeeks
</h3>
<b>Bulma Dropdown menu</b>
<section class="section">
<div class="container">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"
aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Football Players</span>
<span class="icon is-small">
<i class="fa fa-angle-down"
aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu"
id="dropdown-menu"
role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Salah
</a>
<a href="#" class="dropdown-item is-active">
Messi
</a>
<a href="#" class="dropdown-item ">
Cristiano
</a>
<a href="#" class="dropdown-item">
Kane
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
Sterling
</a>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
});
</script>
</div>
</section>
</body>
</html>
|
Output:
This dropdown menu consists of additional modifiers in the Bulma framework. Following are some of the additional modifiers that can be very useful on our website.
- is-active : This modifier will be highlighted all the time. In the above program, the item named Messi uses the is-active modifier.
- is-hover: When the user hovers on the menu, the dropdown will automatically display its list.
- is-right: The is-right modifier can be used in order to right-align the dropdown menu.
- is-up: This modifier can be used when we want to put the dropdown menu above the dropdown button.
Reference: https://bulma.io/documentation/components/dropdown/