Ebintu ebigwa wansi

Toggle contextual overlays okulaga enkalala z'enkolagana n'ebirala ne Bootstrap dropdown plugin.

Ku muko guno

Okulaba okutwalira awamu

Dropdowns zikyusibwakyusibwa, contextual overlays okulaga enkalala z'enkolagana n'ebirala. Zikolebwa nga zikwatagana ne Bootstrap dropdown JavaScript plugin erimu. Zikyusibwakyusibwa nga zinyiga, so si nga ziwuubaala; kino kusalawo kwa dizayini mu bugenderevu .

Dropdowns zizimbibwa ku tterekero ly’ebitabo ery’ekibiina eky’okusatu, Popper , ekiwa ekifo ekikyukakyuka n’okuzuula ekifo eky’okulaba. Kakasa nti ossaamu popper.min.js nga tonnaba kukola JavaScript ya Bootstrap oba kozesa bootstrap.bundle.min.js/ bootstrap.bundle.jserimu Popper. Popper tekozesebwa kuteeka dropdowns mu navbars wadde nga dynamic positioning tekyetaagisa.

Okutuuka ku bantu

Omutindo gwa WAI ARIA role="menu" gutegeeza widget entuufu , naye kino kyetongodde ku menu eziringa enkola ezitandikawo ebikolwa oba emirimu. Menyu za ARIA zisobola okubeeramu ebintu bya menu byokka, ebintu bya menu eby’akabokisi akalaga, ebintu bya menu bya button ya radio, ebibinja bya button za radio, ne sub-menus.

Ku luuyi olulala, ebigwa bya Bootstrap bikoleddwa okuba eby’enjawulo era nga bikozesebwa mu mbeera ez’enjawulo n’ensengeka z’obubonero. Okugeza, kisoboka okukola ebifo ebikka ebirimu ebiyingizibwa ebirala n’ebifuga foomu, gamba ng’ennimiro z’okunoonya oba foomu z’okuyingira. Olw'ensonga eno, Bootstrap tesuubira (oba okwongera mu ngeri ey'otoma) ekintu kyonna ku rolen'ebintu aria-ebyetaagisa ku menu za ARIA entuufu . Abawandiisi bajja kuba balina okussaamu ebifaananyi bino ebisingawo ebitongole bennyini.

Naye, Bootstrap eyongerako obuwagizi obuzimbibwamu ku nkolagana za menu ya keyboard ezisinga obungi eza bulijjo, gamba ng’obusobozi okutambula mu .dropdown-itembintu ssekinnoomu ng’okozesa ebisumuluzo bya cursor n’okuggalawo menu ESCn’ekisumuluzo.

Eby’okulabirako

Zinga toggle ya dropdown (button yo oba link yo) ne dropdown menu munda mu .dropdown, oba elementi endala elangirira position: relative;. Dropdowns zisobola okutandika okuva <a>oba <button>elements okusobola okutuukana obulungi ku byetaago byo ebiyinza okubaawo. Ebyokulabirako ebiragiddwa wano bikozesa <ul>ebintu eby’amakulu we kisaanidde, naye obubonero obw’ennono buwagirwa.

Butaamu emu

Single yonna .btnesobola okufuulibwa dropdown toggle nga waliwo enkyukakyuka mu markup. Laba engeri gy’oyinza okuziteeka ku nkola n’ebintu byombi <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>

Era nga waliwo <a>elementi:

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>

Ekisinga obulungi kino osobola okukikola ne button variant yonna, naawe:

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

Okugabanyaamu bbaatuuni

Mu ngeri y’emu, tonda split button dropdowns nga kumpi markup y’emu nga button emu dropdowns, naye nga kwogasse .dropdown-toggle-splitfor for proper spacing around the dropdown caret.

Tukozesa kiraasi eno ey’enjawulo okukendeeza ku horizontal paddingku buli ludda lwa caret ebitundu 25% n’okuggyawo margin-leftthat’s added for regular button dropdowns. Enkyukakyuka ezo ez’enjawulo zikuuma caret ng’eri wakati mu bbaatuuni eyawuddwamu era ziwa ekifo ky’okukuba eky’obunene obutuufu okumpi ne bbaatuuni enkulu.

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

Okugerageranya obunene

Ebintu ebikka wansi bikola ne butaamu eza sayizi zonna, omuli obutambi obugwa wansi obusookerwako n’obw’enjawulo.

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

Ebiwujjo ebiddugavu

Londa mu dropdowns enzirugavu okukwatagana ne navbar enzirugavu oba custom style ng'ogatta .dropdown-menu-darkku eriwo .dropdown-menu. Tewali nkyukakyuka yeetaagibwa ku bintu ebikka wansi.

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>

Era okugiteeka okukozesa mu navbar:

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>

Endagiriro

RTL

Endagiriro ziraga endabirwamu nga okozesa Bootstrap mu RTL, amakulu .dropstartgajja kulabika ku ludda olwa ddyo.

Esangibwa wakati

Kola menu egwa wakati wansi wa toggle ne .dropdown-centerku elementi omuzadde.

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>

Okugwa wansi

Trigger dropdown menus waggulu wa elements nga oyongera .dropupku elementi omuzadde.

<!-- 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 nga eri wakati

Kola menu egwa wakati waggulu wa toggle ne .dropup-centerku elementi omuzadde.

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

Trigger dropdown menus ku ddyo w'ebintu nga oyongera .dropendku elementi omuzadde.

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

Okutandika okutonnya

Trigger dropdown menus ku kkono w'ebintu nga oyongera .dropstartku elementi omuzadde.

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

Osobola okukozesa <a>oba <button>elements nga ebintu ebikka wansi.

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>

Osobola n'okukola ebintu ebitali bikwatagana ne .dropdown-item-text. Wulira nga oli waddembe okwongera sitayiro n'ebikozesebwa ebya custom CSS oba ebiwandiiko.

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>

Obunyiikivu

Yongera .activeku bintu ebiri mu dropdown okubikola sitayiro nga active . Okutuusa embeera ekola ku tekinologiya ayamba, kozesa aria-currentekintu — ng’okozesa pageomuwendo gw’olupapula oluliwo kati, oba trueku kintu ekiriwo kati mu kibinja.

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>

Obutesobola

Yongera .disabledku bintu mu dropdown okubikola sitayiro nga ebilema .

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>

Nga bwekiba, menu egwa wansi eteekebwa mu ngeri ey’otoma 100% okuva waggulu ne ku ludda olwa kkono olwa muzadde waayo. Kino osobola okukyusa ne .drop*kiraasi z’obulagirizi, naye osobola n’okuzifuga n’ekiraasi z’abakyusa endala.

Okwongera .dropdown-menu-endku a .dropdown-menuku ddyo sengeka menu egwa wansi. Endagiriro zibeera mu ndabirwamu nga okozesa Bootstrap mu RTL, amakulu .dropdown-menu-endgajja kulabika ku ludda olwa kkono.

Emitwe gigulumivu! Dropdowns ziteekebwa mu kifo okwebaza Popper okuggyako nga ziri mu navbar.

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>

Okulaganya okuddamu

Bw’oba oyagala okukozesa okulaganya okuddamu, lemesa okuteeka mu kifo ekikyukakyuka ng’ogattako data-bs-display="static"ekintu era okozese ebika by’enkyukakyuka eziddamu.

Okukwataganya ku ddyo menu egwa wansi n'ekifo ekiweereddwa oba ekinene, yongerako .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>

Okukwataganya ku kkono menu egwa wansi n'ekifo ekiweereddwa oba ekinene, yongera .dropdown-menu-endne .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>

Weetegereze nti teweetaaga kwongerako kintu data-bs-display="static"ku buttons ezikka mu navbars, okuva Popper bwetakozesebwa mu navbars.

Enkola z’okulaganya

Nga otwala ebisinga ku by’okulonda ebiragiddwa waggulu, wuuno akatono aka sinki y’omu ffumbiro demo ey’enjawulo ez’okulaga okugwa wansi mu kifo kimu.

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>

Emitwe gy’omutwe

Okwongerako omutwe okuwandiika ebitundu by'ebikolwa mu menu yonna ekka.

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>

Abagabanya ebintu

Yawula ebibinja by’ebintu ebikwatagana mu menu n’omugabanya.

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>

Okuwandiika obubaka

Teeka ekiwandiiko kyonna eky'eddembe munda mu menu egwa wansi n'ebiwandiiko era kozesa ebikozesebwa mu kuteeka ebanga . Weetegereze nti ojja kwetaaga sitayiro endala ez'okugerageranya okuziyiza obugazi bwa menu.

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>

Ffoomu

Teeka foomu munda mu menu egwa wansi, oba gifuule mu menu egwa wansi, era kozesa margin oba padding utilities okugiwa ekifo ekibi ky’oyagala.

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>

Kozesa data-bs-offsetoba data-bs-referenceokukyusa ekifo ekigenda okukka.

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>

Auto close enneeyisa

Nga bwe kibadde, menu egwa eggalwa nga onyiga munda oba ebweru wa menu egwa. Osobola okukozesa autoCloseeky'okulonda okukyusa enneeyisa eno ey'okugwa.

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

Enkyukakyuka ezikyukakyuka

Yayongerwako mu v5.2.0

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, dropdowns kati zikozesa enkyukakyuka za CSS ez'omu kitundu ku .dropdown-menufor enhanced real-time customization. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

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

Okulongoosa okuyita mu nkyukakyuka za CSS kuyinza okulabibwa ku .dropdown-menu-darkkiraasi gye tusazaamu emiwendo egyenjawulo awatali kwongerako bisunsuzi bya CSS ebikoppeddwa.

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

Enkyukakyuka za Sass

Enkyukakyuka ku byonna ebigwa wansi:

$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

Enkyukakyuka z'okugwa kw'ekizikiza :

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

Enkyukakyuka za carets ezesigamiziddwa ku CSS eziraga enkolagana ya dropdown:

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

Ebirungo ebitabuddwa

Mixins zikozesebwa okukola carets ezesigamiziddwa ku CSS era zisobola okusangibwa mu 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;
    }
  }
}

Enkozesa

Okuyita mu data attributes oba JavaScript, plugin egwa wansi ekyusa ebirimu ebikwekebwa (dropdown menus) nga ekyusa .showkiraasi ku muzadde .dropdown-menu. Attribute data-bs-toggle="dropdown"yesigamyeko okuggalawo dropdown menus ku ddaala ly'enkola, kale kirungi bulijjo okugikozesa.

Ku byuma ebisobola okukwata, okuggulawo ekintu ekigwa wansi kwongera ebikwaata ebitalimu kintu kyonna mouseoverku baana ab’amangu <body>ab’ekintu. This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation , ekiyinza okulemesa tap wonna ebweru w'okugwa okuva ku kutandika koodi eggalawo okugwa. Ekifo ekikka wansi bwe kimala okuggalwa, ebikwaso bino ebirala ebitaliiko kintu kyonna mouseoverbiggyibwawo.

Okuyita mu bikwata ku data

Yongera data-bs-toggle="dropdown"ku link oba button okukyusa dropdown.

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

Okuyita mu JavaScript

Kuba ku bigenda okukka wansi ng’oyita mu JavaScript:

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

`data-bs-toggle="dropdown"`kikyali kyetaagisa

Nga tofuddeeyo oba oyita dropdown yo ng'oyita mu JavaScript oba mu kifo ky'ekyo okozesa data-api, data-bs-toggle="dropdown"bulijjo kyetaagisa okubeerawo ku dropdown's trigger element.

Eby’okulondako

Nga eby'okulonda bwe bisobola okuyisibwa nga biyita mu bikwata ku data oba JavaScript, osobola okugattako erinnya ly'okulonda ku data-bs-, nga mu data-bs-animation="{value}". Kakasa nti okyusa ekika kya case eky’erinnya ly’okulonda okuva ku “ camelCase ” okudda ku “ kebab-case ” ng’oyisa eby’okulonda ng’oyita mu data attributes. Okugeza, kozesa data-bs-custom-class="beautifier"mu kifo kya data-bs-customClass="beautifier".

Okuva ku Bootstrap 5.2.0, ebitundu byonna biwagira ekintu kya data ekiterekeddwa eky'okugezesadata-bs-config ekiyinza okuteeka ensengeka y'ebitundu ennyangu ng'olunyiriri lwa JSON. Ekintu bwe kiba data-bs-config='{"delay":0, "title":123}'n'ebintu data-bs-title="456", omuwendo ogusembayo titlegujja kuba 456era ebifaananyi bya data eby'enjawulo bijja kusazaamu emiwendo egyaweebwa ku data-bs-config. Okugatta ku ekyo, ebikwata ku data ebiriwo bisobola okuteeka emiwendo gya JSON nga data-bs-delay='{"show":0,"hide":150}'.

Erinnya	Okuwandiika	Okukosamu	Okunnyonnyola
`autoClose`	boolean, olunyiriri	`true`	Tegeka enneeyisa y'okuggalawo mu ngeri ey'obwengula ey'ekintu ekikka wansi: `true`- ekintu ekikka wansi kijja kuggalwa nga onyiga ebweru oba munda mu menu egwa wansi. `false`- dropdown ejja kuggalwa nga onyiga ku toggle button era nga oyita mu ngalo `hide`oba `toggle`enkola. (Era tegenda kuggalwa nga onyiga `esc`ekisumuluzo) `'inside'`- ekintu ekikka wansi kijja kuggalwa (kwokka) nga onyiga munda mu menu egwa wansi. `'outside'`- ekikka wansi kijja kuggalwa (kwokka) ng'onyiga ebweru wa menu egwa wansi. Note: dropdown bulijjo esobola okuggalwa `ESC`n'ekisumuluzo.
`boundary`	olunyiriri, ekintu	`'clippingParents'`	Ensalo y'okuziyiza okujjula eya menu egwa wansi (ekola ku Popper's preventOverflow modifier yokka). Nga bwekiba `clippingParents`era esobola okukkiriza HTMLElement reference (nga eyita mu JavaScript yokka). Okumanya ebisingawo laba Popper's detectOverflow docs .
`display`	akaguwa	`'dynamic'`	Nga bwekiba, tukozesa Popper ku dynamic positioning. Kino lemesa nga olina `static`.
`offset`	ensengeka, olunyiriri, omulimu	`[0, 2]`	Offset ya dropdown okusinziira ku target yaayo. Osobola okuyisa olunyiriri mu bitabo bya data nga olina emiwendo egyawuddwamu koma nga: `data-bs-offset="10,20"`. Omulimu bwe gukozesebwa okuzuula offset, guyitibwa n’ekintu ekirimu popper placement, reference, ne popper rects nga argument yaayo esooka. Ekintu ekivaako DOM node kiyisibwa nga ensonga eyokubiri. Omulimu gulina okuzzaayo ensengekera erimu ennamba bbiri: skidding , distance . Okumanya ebisingawo laba Popper's offset docs .
`popperConfig`	null, ekintu, omulimu	`null`	Okukyusa ensengeka ya Popper eya Bootstrap esookerwako, laba ensengeka ya Popper . Omulimu bwe gukozesebwa okukola ensengeka ya Popper, guyitibwa n'ekintu ekirimu ensengeka ya Popper eya Bootstrap eya bulijjo. Kikuyamba okukozesa n'okugatta ekisookerwako n'ensengeka yo. Omulimu gulina okuzzaayo ekintu eky'okusengeka ekya Popper.
`reference`	omuguwa, ekintu, ekintu	`'toggle'`	Ekintu ekijuliziddwa mu menu egwa wansi. Akkiriza emiwendo gya `'toggle'`, `'parent'`, ekijuliziddwa HTMLElement oba ekintu ekiwa `getBoundingClientRect`. Okumanya ebisingawo laba Popper's constructor docs ne virtual element docs .

Okukozesa function ne`popperConfig`

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

Enkola

Engeri	Okunnyonnyola
`dispose`	Esaanyaawo ekintu ekigwa wansi. (Eggyawo data eterekeddwa ku elementi ya DOM)
`getInstance`	Enkola ya static ekusobozesa okufuna dropdown instance ekwatagana ne DOM element, osobola okugikozesa nga eno: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Enkola ya static ezzaayo ekifaananyi ekikka ekikwatagana n'ekintu kya DOM oba okukola ekipya singa kiba nga tekitandikibwawo. Osobola okugikozesa bw’otyo: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Ekweka menu egwa wansi eya navbar oba tabbed navigation eweereddwa.
`show`	Eraga menu egwa wansi eya navbar oba tabbed navigation eweereddwa.
`toggle`	Ekyusa menu egwa wansi eya navbar oba tabbed navigation eweereddwa.
`update`	Ezza obuggya ekifo ky'ekintu ekigwa wansi.

Ebibaddewo

Ebintu byonna ebigwa wansi bikubwa ku elementi ekyukakyuka oluvannyuma ne bifuumuulwa waggulu. Kale osobola n'okugattako abawuliriza b'ebibaddewo ku .dropdown-menu's parent element. hide.bs.dropdownera hidden.bs.dropdownebibaddewo birina ekintu clickEvent(nga ekika ky'Ekibaddewo ekyasooka kiri click) ekirimu Ekintu ky'Ekibaddewo eky'ekintu eky'okunyiga.

Ekika ky’ekintu ekibaawo	Okunnyonnyola
`hide.bs.dropdown`	Ekuba amangu ddala nga `hide`enkola ya instance ebadde eyitiddwa.
`hidden.bs.dropdown`	Ekubwa nga dropdown ewedde okukwekebwa okuva eri omukozesa era enkyukakyuka za CSS ziwedde.
`show.bs.dropdown`	Ekuba amangu ddala nga `show`enkola ya instance eyitibwa.
`shown.bs.dropdown`	Ekubwa nga dropdown ekoleddwa okulabika eri omukozesa era nga enkyukakyuka za CSS ziwedde.

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

Ebintu ebigwa wansi

Okulaba okutwalira awamu

Okutuuka ku bantu

Eby’okulabirako

Butaamu emu

Okugabanyaamu bbaatuuni

Okugerageranya obunene

Ebiwujjo ebiddugavu

Endagiriro

RTL

Esangibwa wakati

Okugwa wansi

Dropup nga eri wakati

Dropend

Okutandika okutonnya

Ebintu ebiri mu menu

Obunyiikivu

Obutesobola

Okusengeka menu

Okulaganya okuddamu

Enkola z’okulaganya

Ebirimu mu menu

Emitwe gy’omutwe

Abagabanya ebintu

Okuwandiika obubaka

Ffoomu

Auto close enneeyisa

CSS

Enkyukakyuka ezikyukakyuka

Enkyukakyuka za Sass

Ebirungo ebitabuddwa

Enkozesa

Okuyita mu bikwata ku data

Okuyita mu JavaScript

`data-bs-toggle="dropdown"`kikyali kyetaagisa

Eby’okulondako

Okukozesa function ne`popperConfig`

Enkola

Ebibaddewo

Ebintu ebigwa wansi

Okulaba okutwalira awamu

Okutuuka ku bantu

Eby’okulabirako

Butaamu emu

Okugabanyaamu bbaatuuni

Okugerageranya obunene

Ebiwujjo ebiddugavu

Endagiriro

RTL

Esangibwa wakati

Okugwa wansi

Dropup nga eri wakati

Dropend

Okutandika okutonnya

Ebintu ebiri mu menu

Obunyiikivu

Obutesobola

Okusengeka menu

Okulaganya okuddamu

Enkola z’okulaganya

Ebirimu mu menu

Emitwe gy’omutwe

Omutwe ogugwa wansi

Abagabanya ebintu

Okuwandiika obubaka

Ffoomu

Ebintu ebiyinza okugwa wansi

Auto close enneeyisa

CSS

Enkyukakyuka ezikyukakyuka

Enkyukakyuka za Sass

Ebirungo ebitabuddwa

Enkozesa

Okuyita mu bikwata ku data

Okuyita mu JavaScript

data-bs-toggle="dropdown"kikyali kyetaagisa

Eby’okulondako

Okukozesa function nepopperConfig

Enkola

Ebibaddewo

`data-bs-toggle="dropdown"`kikyali kyetaagisa

Okukozesa function ne`popperConfig`