Course Recommendations:

Bootstrap 5 Dropdown List

Basic Dropdown List

Example

A dropdown menu is a toggleable menu that allows users to select values from a predefined list:
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  Dropdown Button
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>

Try It Yourself

</button>

Example Explanation .dropdown

To open the dropdown menu, please use the class that indicates the dropdown menu. .dropdown-toggle 类和 class and data-toggle="dropdown"

attribute of the button or link. .dropdown-menu class to <div> element, which can actually construct the dropdown menu. Then add the .dropdown-item class added to each element (link or button) in the dropdown menu.

Dropdown list separator

.dropdown-divider class is used to separate links in the dropdown menu with a horizontal thin border:

Example

<li><hr class="dropdown-divider"></hr></li>

Try It Yourself

Dropdown list title

.dropdown-header class is used to add a title to the dropdown menu:

Example

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

Try It Yourself

disabled and active items

Please use .active class to highlight a specific dropdown item (adding a blue background color).

To disable a specific item in the dropdown list, please use .disabled class (which gets a light grey text color and "no-parking-sign" icon on hover).

Example

<li><a class="dropdown-item" href="#">Normal</a></li>
<li><a class="dropdown-item active" href="#">Active</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled</a></li>

Try It Yourself

position of the dropdown list

You can also specify the .dropend or .dropstart class added to the dropdown element to create a "dropend" or "dropstart" menu. Note that the insertion symbol/arrow is added automatically:

Dropright

<div class="dropdown dropend">

Try It Yourself

Dropleft

<div class="dropdown dropstart">

Try It Yourself

Right-aligned dropdown list

To align the dropdown menu to the right, please change .dropdown-menu-end class added to the .dropdown-menu elements:

Example

<div class="dropdown-menu dropdown-menu-end">

Try It Yourself

Pull-up list

If you want the dropdown menu to open upwards instead of downwards, please change the <div> element with class="dropdown" to "dropup":

Example

<div class="dropup">

Try It Yourself

Dropdown Text

.dropdown-item-text Class used to add plain text to dropdown items, or to add default link style to links.

Example

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li><a class="dropdown-item" href="#">Link 2</a></li>
  <li><a class="dropdown-item" href="#">Link 3</a></li>
  <li><a class="dropdown-item-text" href="#">Text Link</a></li>
  <li><span class="dropdown-item-text">Plain Text</span></li>
</ul>

Try It Yourself

Combination of buttons and dropdown lists

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Phone</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Try It Yourself

Vertical combination of buttons and dropdown lists

Example

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Phone</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Try It Yourself