Выпадающее меню

За открытие выпадающего меню отвечает атрибут data-bs-toggle="dropdown".

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Настройки
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Страницы</a></li>
    <li><a class="dropdown-item" href="#">Разделы</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Сообщения</a></li>
  </ul>
</div>

Результат кода:

В качестве библиотеки выпадающего меню Twitter Bootstrap использует Popper.js.

Открывать меню при нажатии на иконку

Атрибут data-toggle="dropdown", можно задать на иконку, после чего при нажатии на иконку будет открываться  выпадающее меню.

<div class="btn-group">
    <button type="button" class="btn">Настройки</button>
    <button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Страницы</a>
        <a class="dropdown-item" href="#">Разделы</a>
        <a class="dropdown-item" href="#">Сообщения</a>
    </div>
</div>

Результат кода:

Направление выпадающего меню

Задать направление выпадающего меню можно через классы .dropend, .dropstart и .dropup.

<div class="dropdown dropend">
  <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Настройки
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Страницы</a></li>
    <li><a class="dropdown-item" href="#">Разделы</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Сообщения</a></li>
  </ul>
</div>

Результат кода:

Не закрывать меню при нажатии на пункты

Когда выбирается пункт меню, то само выпадающее меню закрывается.

Если надо, чтобы при выборе пункта меню выпадающее меню не закрывалось, то для этого надо добавить атрибут data-bs-auto-close="outside".

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
    Настройки
  </button>
  <form class="dropdown-menu">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="item-1">
      <label class="form-check-label" for="item-1">Пункт 1</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="item-2">
      <label class="form-check-label" for="item-2">Пункт 2</label>
    </div>
  </form>
</div>

Пример кода:

Выполнять код после открытия выпадающего меню

Выполнить код при открытии или закрытия выпадающего меню можно через события show.bs.dropdown и hide.bs.dropdown.

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" id="dropdown">
    Настройки
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Страницы</a></li>
    <li><a class="dropdown-item" href="#">Разделы</a></li>
  </ul>
</div>

<script>
const dropdown = document.getElementById("dropdown");
dropdown.addEventListener("show.bs.dropdown", e => {
  // код при открытии выпадающего меню
})
</script>

Пример кода: