падащи менюта

Превключете контекстуалните наслагвания за показване на списъци с връзки и други с плъгина за падащо меню Bootstrap.

На тази страница

Преглед

Падащите менюта са превключващи, контекстуални наслагвания за показване на списъци с връзки и други. Те са направени интерактивни с включената приставка за JavaScript с падащо меню Bootstrap. Те се превключват чрез щракване, а не чрез задържане на мишката; това е умишлено дизайнерско решение .

Падащите менюта са изградени върху библиотека на трета страна, Popper , която осигурява динамично позициониране и откриване на прозорци. Не забравяйте да включите popper.min.js преди JavaScript на Bootstrap или използвайте bootstrap.bundle.min.js/ bootstrap.bundle.js, който съдържа Popper. Popper не се използва за позициониране на падащи менюта в ленти за навигация, въпреки че не е необходимо динамично позициониране.

Достъпност

Стандартът WAI ARIA дефинира действителна role="menu"джаджа , но това е специфично за подобни на приложения менюта, които задействат действия или функции. Менютата ARIA могат да съдържат само елементи от менюто, елементи от менюто с квадратчета за отметка, елементи от менюто с радио бутони, групи радио бутони и подменюта.

Падащите менюта на Bootstrap, от друга страна, са проектирани да бъдат общи и приложими към различни ситуации и структури за маркиране. Например, възможно е да създадете падащи менюта, които съдържат допълнителни входове и контроли на формуляри, като полета за търсене или формуляри за влизане. Поради тази причина Bootstrap не очаква (нито добавя автоматично) нито един от атрибутите roleи , необходими за истинските ARIA менюта. Авторите ще трябва сами да включат тези по-специфични атрибути.aria-

Въпреки това, Bootstrap добавя вградена поддръжка за повечето стандартни взаимодействия с менюто на клавиатурата, като например възможността за придвижване през отделни .dropdown-itemелементи с помощта на клавишите със стрелки и затваряне на менюто с ESCклавиша.

Примери

Обвийте превключвателя на падащото меню (вашият бутон или връзка) и падащото меню в .dropdown, или друг елемент, който декларира position: relative;. Падащите менюта могат да се задействат от <a>или <button>елементи, за да отговарят по-добре на вашите потенциални нужди. Показаните тук примери използват семантични <ul>елементи, където е подходящо, но се поддържа персонализирано маркиране.

Единичен бутон

Всеки единичен .btnможе да се превърне в падащо превключване с някои промени в маркирането. Ето как можете да ги накарате да работят с един от двата <button>елемента:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

И с <a>елементи:

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Най-добрата част е, че можете да направите това и с всеки вариант на бутон:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Бутон за разделяне

По същия начин създайте падащи менюта с разделени бутони с практически същата маркировка като падащите менюта с един бутон, но с добавяне на .dropdown-toggle-splitза правилно разстояние около падащото меню.

Използваме този допълнителен клас, за да намалим хоризонталата paddingот двете страни на каретката с 25% и да премахнем това margin-left, което е добавено за обикновени падащи бутони. Тези допълнителни промени поддържат каретката центрирана в бутона за разделяне и осигуряват по-подходящо оразмерена зона за попадение до основния бутон.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Оразмеряване

Падащите менюта с бутони работят с бутони с всякакви размери, включително бутони по подразбиране и разделени падащи бутони.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Тъмни падащи менюта

Изберете по-тъмни падащи менюта, за да съответствате на тъмна навигационна лента или персонализиран стил, като добавите .dropdown-menu-darkкъм съществуващ .dropdown-menu. Не са необходими промени в падащите елементи.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

И поставянето му за използване в навигационна лента:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Упътвания

RTL

Упътванията са огледални, когато използвате Bootstrap в RTL, което означава, че .dropstartще се появи от дясната страна.

Центрирано

Направете падащото меню центрирано под превключвателя с .dropdown-centerвърху родителския елемент.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Спадне до

Задействайте падащи менюта над елементите чрез добавяне .dropupкъм родителския елемент.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Изпускащ се центриран

Направете падащото меню центрирано над превключвателя с .dropup-centerвърху родителския елемент.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

Задействайте падащи менюта отдясно на елементите чрез добавяне .dropendкъм родителския елемент.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Дропстарт

Задействайте падащи менюта отляво на елементите чрез добавяне .dropstartкъм родителския елемент.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Можете да използвате <a>или <button>елементи като падащи елементи.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Можете също да създавате неинтерактивни падащи елементи с .dropdown-item-text. Чувствайте се свободни да стилизирате допълнително с персонализирани CSS или текстови помощни програми.

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Активен

Добавете .activeкъм елементи в падащото меню, за да ги оформите като активни . За да предадете активното състояние на помощни технологии, използвайте aria-currentатрибута — като използвате pageстойността за текущата страница или trueза текущия елемент в набор.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

хора с увреждания

Добавете .disabledкъм елементи в падащото меню, за да ги оформите като деактивирани .

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

По подразбиране падащото меню се позиционира автоматично на 100% от горната част и от лявата страна на своя родител. Можете да промените това с насочените .drop*класове, но можете също да ги контролирате с допълнителни модификаторни класове.

Добавяне .dropdown-menu-endкъм a .dropdown-menuза подравняване на падащото меню вдясно. Упътванията са огледални, когато използвате Bootstrap в RTL, което означава, че .dropdown-menu-endще се появи от лявата страна.

Горе главата! Падащите менюта се позиционират благодарение на Popper, освен когато се съдържат в навигационна лента.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Отзивчиво подравняване

Ако искате да използвате адаптивно подравняване, деактивирайте динамичното позициониране, като добавите data-bs-display="static"атрибута и използвайте адаптивните вариационни класове.

За да подравните надясно падащото меню с дадената точка на прекъсване или по-голяма, добавете .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

За да подравните ляво падащото меню с дадената точка на прекъсване или по-голяма, добавете .dropdown-menu-endи .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Имайте предвид, че не е необходимо да добавяте data-bs-display="static"атрибут към падащите бутони в навигационните ленти, тъй като Popper не се използва в навигационните ленти.

Опции за подравняване

Като вземем повечето от опциите, показани по-горе, ето малка демонстрация на кухненска мивка с различни опции за подравняване на падащото меню на едно място.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Заглавки

Добавете заглавка, за да етикетирате секции от действия във всяко падащо меню.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Разделители

Разделете групи от свързани елементи от менюто с разделител.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Текст

Поставете всякакъв текст в свободна форма в падащо меню с текст и използвайте помощни програми за интервали . Имайте предвид, че вероятно ще ви трябват допълнителни стилове за оразмеряване, за да ограничите ширината на менюто.

html

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Форми

Поставете формуляр в падащо меню или го направете в падащо меню и използвайте помощни програми за марж или подложка , за да му дадете необходимото отрицателно пространство.

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

Използвайте data-bs-offsetили data-bs-reference, за да промените местоположението на падащото меню.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Поведение при автоматично затваряне

По подразбиране падащото меню се затваря, когато щракнете вътре или извън падащото меню. Можете да използвате autoCloseопцията, за да промените това поведение на падащото меню.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

Променливи

Добавен във v5.2.0

Като част от развиващия се подход на Bootstrap към CSS променливите, падащите менюта вече използват локални CSS променливи .dropdown-menuза подобрено персонализиране в реално време. Стойностите за CSS променливите се задават чрез Sass, така че персонализирането на Sass все още се поддържа.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

Персонализирането чрез CSS променливи може да се види в .dropdown-menu-darkкласа, където заместваме конкретни стойности, без да добавяме дублирани CSS селектори.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Sass променливи

Променливи за всички падащи менюта:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Променливи за тъмното падащо меню :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

Променливи за базирани на CSS карети, които показват интерактивността на падащото меню:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Миксини

Миксините се използват за генериране на базирани на CSS каретки и могат да бъдат намерени в scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

Използване

Чрез атрибути на данни или JavaScript плъгинът за падащо меню превключва скритото съдържание (падащи менюта), като превключва .showкласа на родителя .dropdown-menu. На data-bs-toggle="dropdown"атрибута се разчита за затваряне на падащи менюта на ниво приложение, така че е добра идея винаги да го използвате.

На устройства със сензорен екран отварянето на падащо меню добавя празни mouseoverманипулатори към непосредствените деца на <body>елемента. Този несъмнено грозен хак е необходим, за да се заобиколи странност в делегирането на събития в iOS , което иначе би попречило на докосване някъде извън падащото меню да задейства кода, който затваря падащото меню. След като падащото меню се затвори, тези допълнителни празни mouseoverманипулатори се премахват.

Чрез атрибути на данни

Добавете data-bs-toggle="dropdown"към връзка или бутон, за да превключите падащо меню.

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Чрез JavaScript

Извикайте падащите менюта чрез JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`все още се изисква

Независимо дали извиквате своето падащо меню чрез JavaScript или вместо това използвате data-api, data-bs-toggle="dropdown"винаги се изисква да присъства в задействащия елемент на падащото меню.

Настроики

Тъй като опциите могат да се предават чрез атрибути на данни или JavaScript, можете да добавите име на опция към data-bs-, както в data-bs-animation="{value}". Уверете се, че сте променили типа регистър на името на опцията от „ camelCase ” на „ kebab-case ”, когато предавате опциите чрез атрибути на данни. Например използвайте data-bs-custom-class="beautifier"вместо data-bs-customClass="beautifier".

От Bootstrap 5.2.0 всички компоненти поддържат експериментален резервиран атрибут на данни, data-bs-configкойто може да съдържа проста конфигурация на компонент като JSON низ. Когато даден елемент има атрибути data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", крайната titleстойност ще бъде 456и отделните атрибути на данни ще заменят стойностите, дадени на data-bs-config. В допълнение, съществуващите атрибути на данни могат да съдържат JSON стойности като data-bs-delay='{"show":0,"hide":150}'.

Име	Тип	По подразбиране	Описание
`autoClose`	булево, низ	`true`	Конфигурирайте поведението на автоматично затваряне на падащото меню: `true`- падащото меню ще бъде затворено чрез щракване извън или вътре в падащото меню. `false`- падащото меню ще бъде затворено чрез щракване върху бутона за превключване и ръчно извикване на метод `hide`или . `toggle`(Също така няма да се затвори чрез натискане на `esc`клавиш) `'inside'`- падащото меню ще бъде затворено (само) чрез щракване вътре в падащото меню. `'outside'`- падащото меню ще бъде затворено (само) чрез щракване извън падащото меню. Забележка: падащото меню винаги може да бъде затворено с `ESC`ключа.
`boundary`	низ, елемент	`'clippingParents'`	Граница на ограничението за препълване на падащото меню (отнася се само за модификатора на PrevenOverflow на Popper). По подразбиране той е `clippingParents`и може да приеме препратка към HTMLElement (само чрез JavaScript). За повече информация вижте документите на Popper's detectOverflow .
`display`	низ	`'dynamic'`	По подразбиране използваме Popper за динамично позициониране. Деактивирайте това с `static`.
`offset`	масив, низ, функция	`[0, 2]`	Отместване на падащото меню спрямо неговата цел. Можете да подадете низ в атрибути на данни със стойности, разделени със запетая, като: `data-bs-offset="10,20"`. Когато функция се използва за определяне на отместването, тя се извиква с обект, съдържащ разположението на popper, препратката и popper rects като първи аргумент. Задействащият елемент DOM възел се предава като втори аргумент. Функцията трябва да върне масив с две числа: приплъзване , разстояние . За повече информация вижте офсетните документи на Popper .
`popperConfig`	нула, обект, функция	`null`	За да промените конфигурацията на Popper по подразбиране на Bootstrap, вижте конфигурацията на Popper . Когато се използва функция за създаване на конфигурацията на Popper, тя се извиква с обект, който съдържа конфигурацията на Popper по подразбиране на Bootstrap. Помага ви да използвате и обедините настройките по подразбиране с вашата собствена конфигурация. Функцията трябва да върне конфигурационен обект за Popper.
`reference`	низ, елемент, обект	`'toggle'`	Референтен елемент от падащото меню. Приема стойностите на `'toggle'`, `'parent'`, препратка към HTMLElement или обект, предоставящ `getBoundingClientRect`. За повече информация вижте документите за конструктор на Popper и документите за виртуални елементи .

Използване на функция с`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Методи

Метод	Описание
`dispose`	Унищожава падащото меню на елемент. (Премахва съхранените данни в DOM елемента)
`getInstance`	Статичен метод, който ви позволява да получите падащото меню, свързано с DOM елемент, можете да го използвате по следния начин: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Статичен метод, който връща падащ екземпляр, свързан с DOM елемент, или създава нов, в случай че не е инициализиран. Можете да го използвате така: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Скрива падащото меню на дадена навигационна лента или навигация с раздели.
`show`	Показва падащото меню на дадена навигационна лента или навигация с раздели.
`toggle`	Превключва падащото меню на дадена навигационна лента или навигация с раздели.
`update`	Актуализира позицията на падащото меню на елемент.

събития

Всички падащи събития се задействат при превключващия елемент и след това се издигат нагоре. Така че можете също да добавите слушатели на събития към .dropdown-menuродителския елемент. hide.bs.dropdownи hidden.bs.dropdownсъбитията имат clickEventсвойство (само когато оригиналният тип събитие е click), което съдържа обект на събитие за събитието кликване.

Тип събитие	Описание
`hide.bs.dropdown`	Задейства незабавно, когато `hide`методът на екземпляра е извикан.
`hidden.bs.dropdown`	Задейства се, когато падащото меню свърши да бъде скрито от потребителя и CSS преходите са завършени.
`show.bs.dropdown`	Задейства се незабавно, когато `show`се извика методът на екземпляра.
`shown.bs.dropdown`	Задейства се, когато падащото меню е направено видимо за потребителя и CSS преходите са завършени.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

падащи менюта

Преглед

Достъпност

Примери

Единичен бутон

Бутон за разделяне

Оразмеряване

Тъмни падащи менюта

Упътвания

RTL

Центрирано

Спадне до

Изпускащ се центриран

Dropend

Дропстарт

Елементи от менюто

Активен

хора с увреждания

Подравняване на менюто

Отзивчиво подравняване

Опции за подравняване

Съдържание на менюто

Заглавки

Разделители

Текст

Форми

Поведение при автоматично затваряне

CSS

Променливи

Sass променливи

Миксини

Използване

Чрез атрибути на данни

Чрез JavaScript

`data-bs-toggle="dropdown"`все още се изисква

Настроики

Използване на функция с`popperConfig`

Методи

събития

падащи менюта

Преглед

Достъпност

Примери

Единичен бутон

Бутон за разделяне

Оразмеряване

Тъмни падащи менюта

Упътвания

RTL

Центрирано

Спадне до

Изпускащ се центриран

Dropend

Дропстарт

Елементи от менюто

Активен

хора с увреждания

Подравняване на менюто

Отзивчиво подравняване

Опции за подравняване

Съдържание на менюто

Заглавки

Заглавка на падащото меню

Разделители

Текст

Форми

Опции за падащо меню

Поведение при автоматично затваряне

CSS

Променливи

Sass променливи

Миксини

Използване

Чрез атрибути на данни

Чрез JavaScript

data-bs-toggle="dropdown"все още се изисква

Настроики

Използване на функция сpopperConfig

Методи

събития

`data-bs-toggle="dropdown"`все още се изисква

Използване на функция с`popperConfig`