Sure! Here’s a quick guide to Bootstrap 5 (BS5) Dropdowns — versatile toggleable menus for actions, links, or buttons.

? Basic Dropdown

<div class="dropdown">  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">    Dropdown button  </button>  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">    <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>

?? Explanation

• .dropdown: wrapper for dropdown

• .dropdown-toggle: the button/link that toggles dropdown

• data-bs-toggle="dropdown": triggers the dropdown behavior

• .dropdown-menu: container for dropdown items

• .dropdown-item: individual items inside the menu

? Dropup (Menu opens upward)

<div class="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>  </ul></div>

?? Dropdown Directions

You can change the direction:

Example:

<div class="dropend">  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">    Dropend  </button>  <ul class="dropdown-menu">    <li><a class="dropdown-item" href="#">Right side</a></li>  </ul></div>

? Dropdown Items with Headers & Dividers

<ul class="dropdown-menu">  <li><h6 class="dropdown-header">Dropdown header</h6></li>  <li><a class="dropdown-item" href="#">Action</a></li>  <li><hr class="dropdown-divider"></li>  <li><a class="dropdown-item" href="#">Separated link</a></li></ul>

??? Dropdown with Forms

You can place forms inside dropdowns:

<div class="dropdown">  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">    Dropdown with form  </button>  <form class="dropdown-menu p-4">    <div class="mb-3">      <label for="dropdownFormEmail" class="form-label">Email address</label>      <input type="email" class="form-control" id="dropdownFormEmail" placeholder="email@example.com">    </div>    <button type="submit" class="btn btn-primary">Sign in</button>  </form></div>

? Keyboard Accessibility

• Dropdowns support keyboard navigation by default.

• Use aria-expanded, aria-haspopup properly (Bootstrap handles these automatically).

Would you like to see dropdowns in navbars, split button dropdowns, or dropdowns with custom JavaScript events?