Bootstrap 5 - Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering;

Wrap the dropdown's toggle (button or link) with .dropdown

Example 1: Dropdown toggle using button

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
    <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
    <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
  </ul>
</div>

Example 2: Dropdown toggle using anchor tag

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="javascript:void(0);" data-bs-toggle="dropdown">
    Dropdown link
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
    <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
    <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
  </ul>
</div>

Example 3: Dropdown toggle using any button variant