Dropdowns

Bootstrap 5 dropdown and dropup

Use any button to trigger a dropdown menu by placing it within a .btn-groupand providing the proper menu markup

For detail documentation, View Dropdowns on Bootstrap⟶

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown Link </button>
  <ul class="dropdown-menu">
    <li> <a class="dropdown-item" href="#!"> Action </a></li>
    <li> <a class="dropdown-item" href="#!"> Another action </a></li>
    <li> <a class="dropdown-item" href="#!"> Something else here </a></li>
  </ul>
</div>

<div class="btn-group"> <button class="btn btn-danger" type="button"> Action</button><button class="btn btn-danger dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown </span></button>
  <ul class="dropdown-menu">
    <li> <a class="dropdown-item" href="#!"> Action </a></li>
    <li> <a class="dropdown-item" href="#!"> Another action</a></li>
    <li> <a class="dropdown-item" href="#!"> Something else here</a></li>
    <li>
      <hr class="dropdown-divider" />
    </li>
    <li> <a class="dropdown-item" href="#!"> Separated link</a></li>
  </ul>
</div>

<div class="btn-group dropup"> <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropup Button</button>
  <ul class="dropdown-menu">
    <li> <a class="dropdown-item" href="#!"> Action </a></li>
    <li> <a class="dropdown-item" href="#!"> Another action</a></li>
    <li> <a class="dropdown-item" href="#!"> Something else here </a></li>
  </ul>
</div>

<div class="btn-group dropup"> <button class="btn btn-danger" type="button"> Split Dropdown </button><button class="btn btn-danger dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown </span></button>
  <ul class="dropdown-menu">
    <li> <a class="dropdown-item" href="#!"> Action </a></li>
    <li> <a class="dropdown-item" href="#!"> Another action</a></li>
    <li> <a class="dropdown-item" href="#!"> Something else here</a></li>
    <li>
      <hr class="dropdown-divider" />
    </li>
    <li> <a class="dropdown-item" href="#!"> Separated link</a></li>
  </ul>
</div>