Выпадальныя спісы

Пераключайце кантэкстныя накладкі для адлюстравання спісаў спасылак і многае іншае з дапамогай выпадальнага плагіна Bootstrap.

На гэтай старонцы

Агляд

Выпадаючыя спісы - гэта кантэкстныя накладкі, якія можна пераключаць, для адлюстравання спісаў спасылак і іншага. Яны зроблены інтэрактыўнымі з уключаным плагінам Bootstrap для выпадальнага меню JavaScript. Яны пераключаюцца націскам, а не навядзеннем; гэта наўмыснае дызайнерскае рашэнне .

Выпадаючыя спісы створаны на аснове старонняй бібліятэкі 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іх да бацькоўскага элемента.

<!-- 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да .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'`	Мяжа абмежавання перапаўнення выпадальнага меню (прымяняецца толькі да мадыфікатара preventOverflow Попера). Па змаўчанні гэта `clippingParents`і можа прымаць спасылку HTMLElement (толькі праз JavaScript). Для атрымання дадатковай інфармацыі звярніцеся да дакументаў Popper's detectOverflow .
`display`	радок	`'dynamic'`	Па змаўчанні мы выкарыстоўваем Popper для дынамічнага пазіцыянавання. Адключыце гэта з дапамогай `static`.
`offset`	масіў, радок, функцыя	`[0, 2]`	Зрушэнне выпадальнага меню адносна мэты. Вы можаце перадаць радок у атрыбутах дадзеных са значэннямі, падзеленымі коскамі, напрыклад: `data-bs-offset="10,20"`. Калі функцыя выкарыстоўваецца для вызначэння зрушэння, яна выклікаецца з аб'ектам, які змяшчае размяшчэнне попера, спасылку і прамастаянні попера ў якасці першага аргумента. Запускаючы элемент DOM вузел перадаецца ў якасці другога аргумента. Функцыя павінна вяртаць масіў з двума лікамі: занос , адлегласць . Для атрымання дадатковай інфармацыі звярніцеся да афсетнай дакументацыі Попера .
`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

Па цэнтры

Выпадзенне

Выпаданне па цэнтры

Адкінуты

Дропстарт

Пункты меню

Актыўны

Інваліды

Выраўноўванне меню

Адаптыўнае выраўноўванне

Варыянты выраўноўвання

Змест меню

Загалоўкі

Раздзяляльнікі

Тэкст

Формы

Паводзіны аўтаматычнага закрыцця

CSS

Пераменныя

Зменныя Sass

Міксіны

Выкарыстанне

Праз атрыбуты дадзеных

Праз JavaScript

`data-bs-toggle="dropdown"`яшчэ патрабуецца

Параметры

Выкарыстанне функцыі з`popperConfig`

Метады

Падзеі

Выпадальныя спісы

Агляд

Даступнасць

Прыклады

Адзіная кнопка

Кнопка раздзялення

Праклейванне

Цёмныя выпадальныя меню

Напрамкі

RTL

Па цэнтры

Выпадзенне

Выпаданне па цэнтры

Адкінуты

Дропстарт

Пункты меню

Актыўны

Інваліды

Выраўноўванне меню

Адаптыўнае выраўноўванне

Варыянты выраўноўвання

Змест меню

Загалоўкі

Выпадальны загаловак

Раздзяляльнікі

Тэкст

Формы

Выпадаючыя параметры

Паводзіны аўтаматычнага закрыцця

CSS

Пераменныя

Зменныя Sass

Міксіны

Выкарыстанне

Праз атрыбуты дадзеных

Праз JavaScript

data-bs-toggle="dropdown"яшчэ патрабуецца

Параметры

Выкарыстанне функцыі зpopperConfig

Метады

Падзеі

`data-bs-toggle="dropdown"`яшчэ патрабуецца

Выкарыстанне функцыі з`popperConfig`