Bulma Dropdown Content

Bulma is a component-rich, modern, and lightweight CSS framework that is based on flexbox. It helps in building beautiful and responsive web interfaces easier and faster. In this article, we will be seeing what type of content can be used inside a dropdown component in Bulma.

So, a <a> tag can be used directly as a dropdown item but we can also use an <div> element as a dropdown item and fill the div element with whatever content we like. For example paragraphs, links, buttons, etc.

Bulma Dropdown Content Classes:

• dropdown-item: This class represents a single item inside the dropdown. It can be a <a> tag or a <div> element.
• dropdown-divider: This class is used to make a horizontal line called divider to separate the dropdown items if required.

Syntax:

<div class="dropdown-content">
 <div class="dropdown-item">
 ...
 </div>
 <div class="dropdown-divider"></div>
 <a href="#" class="dropdown-item">...</a>
</div>

Example: The below example shows how we can use <a> and <div> elements as dropdown items.

Output:

👁 Image

Reference: https://bulma.io/documentation/components/dropdown/#dropdown-content