Падајући мени

Пребаците контекстуалне преклапања за приказивање листа веза и више помоћу падајућег додатка Боотстрап.

На овој страници

Преглед

Падајући мени су променљиви, контекстуални преклопи за приказ листа веза и још много тога. Они су интерактивни помоћу укљученог ЈаваСцрипт додатка Боотстрап падајућег менија. Пребацују се кликом, а не лебдењем; ово је намерна одлука о дизајну .

Падајући мени су изграђени на библиотеци треће стране, Поппер , која обезбеђује динамичко позиционирање и откривање поља приказа. Обавезно укључите поппер.мин.јс пре Боотстрап-овог ЈаваСцрипт-а или користите bootstrap.bundle.min.js/ bootstrap.bundle.jsкоји садржи Поппер. Поппер се не користи за позиционирање падајућих менија у навигационим тракама, иако динамичко позиционирање није потребно.

Приступачност

ВАИ АРИА стандард дефинише стварни role="menu"виџет , али ово је специфично за меније налик апликацијама који покрећу радње или функције. АРИА менији могу да садрже само ставке менија, ставке менија у пољу за потврду, ставке менија радио дугмади, групе радио дугмади и подменије.

Падајући мени Боотстрапа, с друге стране, дизајнирани су да буду генерички и применљиви на различите ситуације и структуре означавања. На пример, могуће је креирати падајуће меније који садрже додатне уносе и контроле обрасца, као што су поља за претрагу или обрасци за пријаву. Из тог разлога, Боотстрап не очекује (нити аутоматски додаје) ниједан од атрибута roleи aria-потребних за праве АРИА меније. Аутори ће морати сами да укључе ове специфичније атрибуте.

Међутим, Боотстрап додаје уграђену подршку за већину стандардних интеракција менија на тастатури, као што је могућност кретања кроз појединачне .dropdown-itemелементе помоћу тастера са стрелицама и затварање менија помоћу ESCтастера.

Примери

Премотајте прекидач падајућег менија (ваше дугме или везу) и падајући мени унутар .dropdownили другог елемента који декларише position: relative;. Падајући мени се може покренути из <a>или <button>елемената како би боље одговарали вашим потенцијалним потребама. Примери приказани овде користе семантичке <ul>елементе тамо где је то прикладно, али прилагођено означавање је подржано.

Једно дугме

Било који сингл .btnсе може претворити у падајући прекидач са неким променама ознаке. Ево како их можете ставити да раде са било којим <button>елементом:

хтмл

<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>елементима:

хтмл

<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. Нису потребне промене у падајућем менију.

хтмл

<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>

И стављање у употребу у навигационој траци:

хтмл

<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>

Упутства

РТЛ

Упутства се пресликавају када користите Боотстрап у РТЛ-у, што значи .dropstartда ће се појавити на десној страни.

Центрирано

Поставите падајући мени у центар испод прекидача са .dropdown-centerна родитељском елементу.

хтмл

<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на родитељском елементу.

хтмл

<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>елементе као падајуће ставке.

хтмл

<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. Слободно стилизујте даље помоћу прилагођених ЦСС или текстуалних услужних програма.

хтмл

<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за тренутну ставку у скупу.

хтмл

<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у ставке у падајућем менију да бисте их стилизирали као онемогућене .

хтмл

<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десно поравнајте падајући мени. Упутства се пресликавају када користите Боотстрап у РТЛ-у, што значи .dropdown-menu-endда ће се појавити на левој страни.

Главу горе! Падајући мени су позиционирани захваљујући Попперу осим када су садржани у навигационој траци.

хтмл

<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.

хтмл

<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.

хтмл

<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"атрибут у падајућа дугмад у навигационим тракама, пошто се Поппер не користи у навигационим тракама.

Опције поравнања

Узимајући већину опција приказаних изнад, ево демонстрације мале кухињске судопере различитих опција за поравнање падајућег менија на једном месту.

хтмл

<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>

Заглавља

Додајте заглавље да означите делове радњи у било ком падајућем менију.

хтмл

<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>

Разделници

Одвојите групе повезаних ставки менија помоћу преграде.

хтмл

<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 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>

Формс

Ставите образац у падајући мени или га претворите у падајући мени и користите услужне програме за маргине или паддинг да бисте му дали негативни простор који вам је потребан.

хтмл

<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>

хтмл

<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да промените локацију падајућег менија.

хтмл

<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опцију да промените ово понашање падајућег менија.

хтмл

<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>

ЦСС

Променљиве

Додато у в5.2.0

Као део Боотстрап-овог еволуирајућег приступа ЦСС варијабли, падајући мении сада користе локалне ЦСС променљиве укључене .dropdown-menuза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

  --#{$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};

Прилагођавање кроз ЦСС променљиве се може видети на .dropdown-menu-darkкласи где ми заобилазимо одређене вредности без додавања дупликата ЦСС селектора.

  --#{$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};

Сасс варијабле

Променљиве за све падајуће меније:

$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;

Променљиве за карете засноване на ЦСС-у које указују на интерактивност падајућег менија:

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

Микинс

Миксини се користе за генерисање карета заснованих на ЦСС-у и могу се наћи у 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;
    }
  }
}

Употреба

Преко атрибута података или ЈаваСцрипт-а, падајући додатак укључује скривени садржај (падајући менији) тако што укључује .showкласу на надређеном .dropdown-menu. Атрибут data-bs-toggle="dropdown"се ослања на затварање падајућих менија на нивоу апликације, тако да је добра идеја да га увек користите.

На уређајима са омогућеним додиром, отварање падајућег менија додаје празне mouseoverруковаоце непосредним потомцима <body>елемента. Овај, додуше, ружан хак је неопходан да би се заобишла чудна грешка у делегирању догађаја у иОС-у , која би иначе спречила да додир било где изван падајућег менија покрене код који затвара падајући мени. Када се падајући мени затвори, ови додатни празни 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>

Преко ЈаваСцрипт-а

Позовите падајуће меније преко ЈаваСцрипт-а:

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

`data-bs-toggle="dropdown"`још увек потребно

Без обзира да ли позивате падајући мени преко ЈаваСцрипт-а или уместо тога користите дата-апи, data-bs-toggle="dropdown"увек је потребно да буде присутан на елементу покретача падајућег менија.

Опције

Пошто опције могу да се прослеђују преко атрибута података или ЈаваСцрипт-а, можете додати име опције у data-bs-, као у data-bs-animation="{value}". Обавезно промените тип случаја назива опције из „ цамелЦасе ” у „ кебаб-цасе ” када преносите опције преко атрибута података. На пример, користите data-bs-custom-class="beautifier"уместо data-bs-customClass="beautifier".

Од Боотстрап 5.2.0, све компоненте подржавају експериментални резервисани атрибут података data-bs-configкоји може да садржи једноставну конфигурацију компоненте као ЈСОН стринг. Када елемент има атрибуте data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", коначна titleвредност ће бити 456и одвојени атрибути података ће заменити вредности дате на data-bs-config. Поред тога, постојећи атрибути података могу да садрже ЈСОН вредности попут data-bs-delay='{"show":0,"hide":150}'.

Име	Тип	Уобичајено	Опис
`autoClose`	боолеан, стринг	`true`	Конфигуришите понашање аутоматског затварања падајућег менија: `true`- падајући мени ће се затворити кликом изван или унутар падајућег менија. `false`- падајући мени ће се затворити кликом на дугме за пребацивање и ручним позивањем `hide`или `toggle`методом. (Такође се неће затворити притиском на `esc`тастер) `'inside'`- падајући мени ће бити затворен (само) кликом унутар падајућег менија. `'outside'`- падајући мени ће бити затворен (само) кликом изван падајућег менија. Напомена: падајући мени се увек може затворити `ESC`тастером.
`boundary`	стринг, елемент	`'clippingParents'`	Граница ограничења прекорачења падајућег менија (односи се само на Поппер-ов модификатор превентОверфлов). Подразумевано је `clippingParents`и може да прихвати референцу ХТМЛЕлемента (само преко ЈаваСцрипт-а). За више информација погледајте Поппер'с детецтОверфлов документе .
`display`	низ	`'dynamic'`	Подразумевано користимо Поппер за динамичко позиционирање. Онемогућите ово помоћу `static`.
`offset`	низ, стринг, функција	`[0, 2]`	Померање падајућег менија у односу на циљ. Можете проследити стринг у атрибутима података са вредностима одвојеним зарезима као што су: `data-bs-offset="10,20"`. Када се функција користи за одређивање офсета, она се позива са објектом који садржи поппер пласман, референцу и поппер рецтс као први аргумент. ДОМ чвор покретачког елемента се прослеђује као други аргумент. Функција мора да врати низ са два броја: клизање , растојање . За више информација погледајте Попперове офсет документе .
`popperConfig`	нулл, објекат, функција	`null`	Да бисте променили Боотстрап-ову подразумевану Поппер конфигурацију, погледајте Поппер-ову конфигурацију . Када се функција користи за креирање Поппер конфигурације, она се позива са објектом који садржи Боотстрап-ову подразумевану Поппер конфигурацију. Помаже вам да користите и спојите подразумевану са сопственом конфигурацијом. Функција мора да врати конфигурациони објекат за Поппер.
`reference`	стринг, елемент, објекат	`'toggle'`	Референтни елемент падајућег менија. Прихвата вредности `'toggle'`, `'parent'`, референце ХТМЛЕлемента или објекта који пружа `getBoundingClientRect`. За више информација погледајте документе о Попперовим конструкторима и документима виртуелних елемената .

Коришћење функције са`popperConfig`

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

Методе

Метод	Опис
`dispose`	Уништава падајући мени елемента. (Уклања сачуване податке на ДОМ елементу)
`getInstance`	Статички метод који вам омогућава да добијете падајућу инстанцу повезану са ДОМ елементом, можете је користити овако: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Статичка метода која враћа падајућу инстанцу повезану са ДОМ елементом или креира нову у случају да није иницијализована. Можете га користити овако: `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`	Покреће се када је падајући мени завршен са сакривањем од корисника и када су ЦСС прелази завршени.
`show.bs.dropdown`	Активира се одмах када `show`се позове метод инстанце.
`shown.bs.dropdown`	Покреће се када падајући мени постане видљив кориснику и када се ЦСС прелази заврше.

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

Падајући мени

Преглед

Приступачност

Примери

Једно дугме

Дугме за раздвајање

Одређивање величине

Тамни падајући мени

Упутства

РТЛ

Центрирано

Дропуп

Дропуп центриран

Дропенд

Дропстарт

Ставке менија

Ацтиве

Онемогућено

Поравнање менија

Респонсиве алигнмент

Опције поравнања

Садржај менија

Заглавља

Разделници

Текст

Формс

Понашање аутоматског затварања

ЦСС

Променљиве

Сасс варијабле

Микинс

Употреба

Преко атрибута података

Преко ЈаваСцрипт-а

`data-bs-toggle="dropdown"`још увек потребно

Опције

Коришћење функције са`popperConfig`

Методе

Догађаји

Падајући мени

Преглед

Приступачност

Примери

Једно дугме

Дугме за раздвајање

Одређивање величине

Тамни падајући мени

Упутства

РТЛ

Центрирано

Дропуп

Дропуп центриран

Дропенд

Дропстарт

Ставке менија

Ацтиве

Онемогућено

Поравнање менија

Респонсиве алигнмент

Опције поравнања

Садржај менија

Заглавља

Падајуће заглавље

Разделници

Текст

Формс

Опције падајућег менија

Понашање аутоматског затварања

ЦСС

Променљиве

Сасс варијабле

Микинс

Употреба

Преко атрибута података

Преко ЈаваСцрипт-а

data-bs-toggle="dropdown"још увек потребно

Опције

Коришћење функције саpopperConfig

Методе

Догађаји

`data-bs-toggle="dropdown"`још увек потребно

Коришћење функције са`popperConfig`