bulma/docs/_includes/library/components/dropdown.html

<div style="height: 20rem;">
  <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" role="presentation">
        <button role="menuitem" class="dropdown-item">Dropdown item</button>
        <a role="menuitem" class="dropdown-item"> Other dropdown item </a>
        <a role="menuitem" href="#" class="dropdown-item is-active"> Active dropdown item </a>
        <a role="menuitem" href="#" class="dropdown-item"> Other dropdown item </a>
        <hr class="dropdown-divider">
        <a role="menuitem" href="#" class="dropdown-item"> With a divider </a>
      </div>
    </div>
  </div>
</div>

<div style="height: 20rem;">
  <div class="dropdown is-active">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
        <span>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" role="presentation">
        <div role="presentation" class="dropdown-item">
          <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
        </div>
        <hr role="presentation" class="dropdown-divider">
        <div role="presentation" class="dropdown-item">
          <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
        </div>
        <hr role="presentation" class="dropdown-divider">
        <a role="menuitem" href="#" class="dropdown-item"> This is a link </a>
      </div>
    </div>
  </div>
</div>

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
      <span>Click me</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-menu3" role="menu">
    <div class="dropdown-content" role="presentation">
      <a role="menuitem" href="#" class="dropdown-item"> Overview </a>
      <a role="menuitem" href="#" class="dropdown-item"> Modifiers </a>
      <a role="menuitem" href="#" class="dropdown-item"> Grid </a>
      <a role="menuitem" href="#" class="dropdown-item"> Form </a>
      <a role="menuitem" href="#" class="dropdown-item"> Elements </a>
      <a role="menuitem" href="#" class="dropdown-item"> Components </a>
      <a role="menuitem" href="#" class="dropdown-item"> Layout </a>
      <hr class="dropdown-divider">
      <a role="menuitem" href="#" class="dropdown-item"> More </a>
    </div>
  </div>
</div>

<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
      <span>Hover me</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-menu4" role="menu">
    <div class="dropdown-content" role="presentation">
      <div class="dropdown-item">
        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
      </div>
    </div>
  </div>
</div>

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu5">
      <span>Left aligned</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-menu5" role="menu">
    <div class="dropdown-content" role="presentation">
      <div role="menuitem" class="dropdown-item">
        <p>The dropdown is <strong>left-aligned</strong> by default.</p>
      </div>
    </div>
  </div>
</div>

<div class="dropdown is-right is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
      <span>Right aligned</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-menu6" role="menu">
    <div class="dropdown-content" role="presentation">
      <div role="menuitem" class="dropdown-item">
        <p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
      </div>
    </div>
  </div>
</div>

<div class="dropdown is-up">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
      <span>Dropup button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-up" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu7" role="menu">
    <div class="dropdown-content" role="presentation">
      <div class="dropdown-item">
        <p>
          You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
        </p>
      </div>
    </div>
  </div>
</div>