7.19. Bootstrap5 drop-down menu

The drop-down menu is switchable and is a context menu that displays links in a list format.

7.19.1. Example ¶

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Light colored cards
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">link 1</a>
    <a class="dropdown-item" href="#">link 2</a>
    <a class="dropdown-item" href="#">link 3</a>
  </div>
</div>

7.19.2. Case analysis ¶

.dropdown class is used to specify a drop-down menu.

We can use a button or link to open the drop-down menu, which needs to be added .dropdown-toggle and data-toggle="dropdown" property.

<div> add on the element .dropdown-menu class to set the actual drop-down menu, and then add to the options in the drop-down menu .dropdown-item class.

The split line in the drop-down menu ¶

.dropdown-divider class is used to create a horizontal split line in the drop-down menu

7.19.3. Example ¶

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

The title in the drop-down menu ¶

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

7.19.4. Example ¶

<li><h5class="dropdown-header">title 1</h5></li>

Available and prohibited items in drop-down menus ¶

.active class highlights the options of the drop-down menu (adding a blue background).

If you want to disable the drop-down menu, you can use the .disabled class.

7.19.5. Example ¶

<a class="dropdown-item" href="#">General items</a>
<a class="dropdown-item active" href="#">Activate item</a>
<a class="dropdown-item disabled" href="#">Disabled items</a>

Positioning of the drop-down menu ¶

If we want to align the drop-down menu to the right, we can use the .dropdown add after class .dropend or .dropstart class.

.dropend is right aligned. .dropstart is left aligned.

7.19.6. Example ¶

<!-- right alignment -->
<div class="dropdown dropend">
...
</div>

<!-- left justifying -->
<div class="dropdown dropstart">
...
</div>

Drop-down menu pop-up direction settin ¶

The pop-up direction of the drop-down menu is down by default, but we can also set different directions.

7.19.7. Specify the drop-down menu that pops up to the right ¶

If you want the drop-down menu to pop up to the lower right, you can use the div add on the element .dropdown-menu-end class:

Example

<!-- Pull menu button in the bottom right corner-->
<div class="dropdown dropdown-menu-end">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  Dropdown menu pops up at the bottom right corner
  </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>

7.19.8. Specify the pull-up menu that pops up ¶

If you want to pull up the dish and pop it up in one way, you can use the div add the “dropup” class to the element:

Example

<!-- Up menu -->
<div class="dropup">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    drop-down menu
  </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>

7.19.9. Specify the drop-down menu that pops up to the left ¶

If you want the drop-down menu to pop up, you can click div add on the element dropstart class:

Example

<!-- Dropdown menu on the left -->
<div class="dropstart">
  Add some content to test the effect of popping up to the left.<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  drop-down menu
  </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>

Drop-down menu setting text ¶

.dropdown-item-text class can set text items in the drop-down menu

7.19.10. 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">Just text</span></li>
</ul>

Set the drop-down menu in the button group ¶

We can add a drop-down menu to the button:

7.19.11. Example ¶

<div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Tablet</a></li>
        <li><a class="dropdown-item" href="#">Smartphone</a></li>
      </ul>
    </div>
</div>

Vertical button group with drop-down menu:

7.19.12. Example ¶

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Tablet</a></li>
      <li><a class="dropdown-item" href="#">Smartphone</a></li>
    </ul>
  </div>
</div>