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

За открытие выпадающего меню отвечает атрибут 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>

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