Bulma dropdown menu is basically a container of a dropdown button and dropdown menu. It is used to display related links in a list format.
dropdown
- It is a main container for the dropdown.
dropdown-trigger
- It is a container for dropdown buttons.
dropdown-menu
It is a togglable menu that is hidden by default.
dropdown:
It is a main container for the dropdown.
dropdown-content
- It is a dropdown box having a white background with shadow.
dropdown-item
- It is a single item in the dropdown list that will be either
<a>
or <div>
.
dropdown-divider
-It is a horizontal line that is used to separate dropdown items.
General Syntax
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas 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">
Dropdown item
</a>
</div>
</div>
</div>
Dropdown item might be either an anchor link i. e <a>
or <div>
.
General Syntax
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
<span>Dropdown Content</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
<hr class="dropdown-divider">
<div class="dropdown-item">
<p>You simply need to use a <div> instead of <a>.</p>
</div>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
This is a link
</a>
</div>
</div>
</div>
The dropdown component consists of two additional modifier classes such as is-hoverable
& is-active
is-hoverable:
- It displays a dropdown menu when hovering over the dropdown trigger.is-active:
- It is used to show dropdowns all the time.Following are the dropdown menu alignment methods: right aligned, left aligned & drop up.
To align dropdown menu in the right direction, use .is-right
modifier class.
Please keep in mind that the dropdown menu is left-aligned by default.
To show the dropdown menu above the dropdown button, use the is-up
modifier class.