Bulma Dropdown

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.

Steps To Create Bulam CSS Dropdown Menu

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.

Example

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>

Try it now

Dropdown content

Dropdown item might be either an anchor link i. e <a> or <div>.

Example

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>

Try it now

Dropdown: Hoverable or Toggable

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.

Example

General Syntax

      
        <div class="dropdown is-hoverable"></div>

Try it now

Dropdown Alignment

Following are the dropdown menu alignment methods: right aligned, left aligned & drop up.

Right aligned

To align dropdown menu in the right direction, use .is-right modifier class.

Example

General Syntax

      
        <div class="dropdown is-hoverable is-right"></div>

Try it now

Dropdown Menu: Left Aligned

Please keep in mind that the dropdown menu is left-aligned by default.

Example

General Syntax

      
        <div class="dropdown is-{hoverable|active}"></div>

Try it now

Bulma CSS : Dropup Menu

To show the dropdown menu above the dropdown button, use the is-up modifier class.

Example

General Syntax

      
        <div class="dropdown is-{hoverable | active} is-up"></div>

Try it now

Bulma Dropdown

Steps To Create Bulam CSS Dropdown Menu

Example

Dropdown content

Example

Dropdown: Hoverable or Toggable

Example

Dropdown Alignment

Right aligned

Example

Dropdown Menu: Left Aligned

Example

Bulma CSS : Dropup Menu

Example

Related Tutorial

Web Tutorials