How to create Bootstrap 5 Dropdown easily?

Bootstrap 5 Dropdowns

Bootstrap dropdown menu is used to display the predefined links in a list format and it allows the user to select one value from the predefined list.

Steps to create dropdown:

• Assign .dropdown to the dropdown container.
• Place <button> inside the dropdown container and assign .dropdown-toggle, data attribute data-bs-toggle="dropdown" to the <button>.
• Place the unordered list inside the dropdown container and assign .dropdown-menu class.
• Add .dropdown-item to the unordered list item <li> base class.

Note: Follow the above mention steps to create a bootstrap 5 dropdown menu component.

General Syntax

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" >Dropdown 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>

Source Code

<div class="container my-5">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown">Dropdown button</button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <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>

Dropdown Menu Using Hyperlink

Steps to create a dropdown menu using hyperlink:

• Assign .dropdown to the dropdown container.
• Place <a> inside the dropdown container and assign .dropdown-toggle, data attribute data-bs-toggle="dropdown" to the <button>
• Place unordered list inside the dropdown container and assign .dropdown-menu
• Add .dropdown-item to the unordered list item <li>

General Syntax

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown">Dropdown link</a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>

Source Code

<div class="dropdown mt-5 text-center">
  <a class="btn btn-secondary dropdown-toggle" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown">Dropdown link</a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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>

To learn more about the Bootstrap 5, dropdown, click here.