В состав Bootstrap входит компонент для добавления выпадающих меню. JavaScript включен в JS-файл по умолчанию, и вы можете использовать его, просто добавив классы CSS — никакого дополнительного JavaScript не требуется.
Пример
Вот пример выпадающего меню Bootstrap 5:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-bs-toggle="dropdown" aria-expanded="false">
О нас
</button>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li><a class="dropdown-item" href="#">Наша история</a></li>
<li><a class="dropdown-item" href="#">Команда</a></li>
<li><a class="dropdown-item" href="#">Контакты</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Меню вверх
Вы можете изменить вид выпадающего меню так, чтобы оно раскрывалось вверх. Для этого вместо .dropdown используйте класс .dropup в родительском элементе.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="dropup">
<button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-bs-toggle="dropdown" aria-expanded="false">
О нас
</button>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li><a class="dropdown-item" href="#">Наша история</a></li>
<li><a class="dropdown-item" href="#">Команда</a></li>
<li><a class="dropdown-item" href="#">Контакты</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<!-- Добавьте немного места, чтобы меню не исчезло за пределами области просмотра. -->
<style>
.dropup {margin-top:120px;}
</style>
Выравнивание по правому краю
Вы можете добавить класс .dropdown-menu-end к классу .dropdown-menu, чтобы выровнять меню по правому краю родительского элемента.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-bs-toggle="dropdown" aria-expanded="false">
О нашей замечательной компании
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="about-us">
<li><a class="dropdown-item" href="#">Наша история</a></li>
<li><a class="dropdown-item" href="#">Команда</a></li>
<li><a class="dropdown-item" href="#">Контакты</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Заголовки меню
Добавьте заголовок в раскрывающееся меню, применив класс .dropdown-header к элементу заголовка (<h1> — <h6>).
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-bs-toggle="dropdown" aria-expanded="false">
О нас
</button>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li><h6 class="dropdown-header">Информация</h6></li>
<li><a class="dropdown-item" href="#">Наша история</a></li>
<li><a class="dropdown-item" href="#">Команда</a></li>
<li><h6 class="dropdown-header">Контакты</h6></li>
<li><a class="dropdown-item" href="#">Колл-центр</a></li>
<li><a class="dropdown-item" href="#">Расположение магазинов</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Разделители
Добавьте разделители в выпадающее меню, применив класс .dropdown-divider к элементу <hr>.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-bs-toggle="dropdown" aria-expanded="false">
О нас
</button>
<ul class="dropdown-menu" aria-labelledby="about-us">
<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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Отключенные пункты меню
Для отключения пункта меню примените к нему класс .disabled.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-bs-toggle="dropdown" aria-expanded="false">
О нас
</button>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li><a class="dropdown-item" href="#">Наша история</a></li>
<li><a class="dropdown-item" href="#">Команда</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Контакты</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Подробнее о выпадающих меню
Подробнее о выпадающих меню читайте в документации Bootstrap.