Пређи на главни садржај Прескочи на навигацију докумената
in English

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

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

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

Преглед

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

Падајући мени су изграђени на библиотеци треће стране, Поппер , која обезбеђује динамичко позиционирање и откривање поља приказа. Обавезно укључите поппер.мин.јс пре Боотстрап-овог ЈаваСцрипт-а или користите 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" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <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да ће се појавити на десној страни.

Дропуп

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

Дропригхт

Покрените падајуће меније са десне стране елемената додавањем .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">
    Dropright
  </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 Dropright</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">
  <div class="btn-group dropstart" role="group">
    <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>
  </div>
  <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" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
<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>

Користите data-bs-offsetили data-bs-referenceда промените локацију падајућег менија.

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

Сасс

Променљиве

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

$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:             rgba($black, .15);
$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:           $dropdown-padding-y $dropdown-item-padding-x;

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

$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 id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

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

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"још увек потребно

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-bs-, као у data-bs-offset="". Обавезно промените тип случаја назива опције из цамелЦасе у кебаб-цасе када преносите опције преко атрибута података. На пример, уместо да користите data-bs-autoClose="false", користите data-bs-auto-close="false".

Име Тип Уобичајено Опис
boundary стринг | елемент 'clippingParents' Граница ограничења прекорачења падајућег менија (односи се само на Поппер-ов модификатор превентОверфлов). Подразумевано је 'clippingParents'и може да прихвати референцу ХТМЛЕлемента (само преко ЈаваСцрипт-а). За више информација погледајте Поппер'с детецтОверфлов документе .
reference стринг | елемент | објекат 'toggle' Референтни елемент падајућег менија. Прихвата вредности 'toggle', 'parent', референце ХТМЛЕлемента или објекта који пружа getBoundingClientRect. За више информација погледајте документе о Попперовим конструкторима и документима виртуелних елемената .
display низ 'dynamic' Подразумевано користимо Поппер за динамичко позиционирање. Онемогућите ово помоћу static.
offset низ | стринг | функција [0, 2]

Померање падајућег менија у односу на циљ. Можете проследити стринг у атрибутима података са вредностима одвојеним зарезима као што су:data-bs-offset="10,20"

Када се функција користи за одређивање офсета, она се позива са објектом који садржи поппер пласман, референцу и поппер рецтс као први аргумент. ДОМ чвор покретачког елемента се прослеђује као други аргумент. Функција мора да врати низ са два броја: .[skidding, distance]

За више информација погледајте Попперове офсет документе .
autoClose боолеан | низ true

Конфигуришите понашање аутоматског затварања падајућег менија:

  • true- падајући мени ће се затворити кликом изван или унутар падајућег менија.
  • false- падајући мени ће се затворити кликом на дугме за пребацивање и ручним позивањем hideили toggleметодом. (Такође се неће затворити притиском на escтастер)
  • 'inside'- падајући мени ће бити затворен (само) кликом унутар падајућег менија.
  • 'outside'- падајући мени ће бити затворен (само) кликом изван падајућег менија.
popperConfig нулл | објекат | функција null

Да бисте променили Боотстрап-ову подразумевану Поппер конфигурацију, погледајте Поппер-ову конфигурацију .

Када се функција користи за креирање Поппер конфигурације, она се позива са објектом који садржи Боотстрап-ову подразумевану Поппер конфигурацију. Помаже вам да користите и спојите подразумевану са сопственом конфигурацијом. Функција мора да врати конфигурациони објекат за Поппер.

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

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

Методе

Метод Опис
toggle Пребацује падајући мени дате навигационе траке или навигације са картицама.
show Приказује падајући мени дате траке за навигацију или навигације са картицама.
hide Сакрива падајући мени дате траке за навигацију или навигације са картицама.
update Ажурира позицију падајућег менија елемента.
dispose Уништава падајући мени елемента. (Уклања сачуване податке на ДОМ елементу)
getInstance Статичка метода која вам омогућава да добијете падајућу инстанцу повезану са ДОМ елементом, можете је користити овако:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance Статичка метода која враћа падајућу инстанцу повезану са ДОМ елементом или креира нову у случају да није иницијализована. Можете га користити овако:bootstrap.Dropdown.getOrCreateInstance(element)

Догађаји

Сви догађаји падајућег менија се активирају на елементу за пребацивање, а затим се појављују у мехурићима. Дакле, можете додати и слушаоце догађаја на .dropdown-menuродитељски елемент 'с. hide.bs.dropdownи hidden.bs.dropdownдогађаји имају clickEventсвојство (само када је оригинални тип догађаја click) које садржи објекат догађаја за догађај клика.

Метод Опис
show.bs.dropdown Активира се одмах када се позове метода схов инстанце.
shown.bs.dropdown Покреће се када падајући мени постане видљив кориснику и када се ЦСС прелази заврше.
hide.bs.dropdown Активира се одмах када се позове метод сакривања инстанце.
hidden.bs.dropdown Покреће се када је падајући мени завршен са сакривањем од корисника и када су ЦСС прелази завршени. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})