Dropdowns

Ganti overlay kontekstual kanggo nampilake dhaptar pranala lan liya-liyane nganggo plugin gulung mudhun Bootstrap.

Ing kaca iki

Ringkesan

Dropdown bisa diganti, overlay kontekstual kanggo nampilake dhaptar pranala lan liya-liyane. Dheweke digawe interaktif karo plugin JavaScript dropdown Bootstrap sing kalebu. Padha diganti kanthi ngeklik, ora kanthi nglayang; iki minangka keputusan desain sing disengaja .

Dropdowns dibangun ing perpustakaan pihak katelu, Popper , sing nyedhiyakake posisi dinamis lan deteksi viewport. Priksa manawa sampeyan kalebu popper.min.js sadurunge Bootstrap JavaScript utawa gunakake bootstrap.bundle.min.js/ bootstrap.bundle.jssing ngemot Popper. Popper ora digunakake kanggo nyelehake dropdown ing navbar sanajan posisi dinamis ora dibutuhake.

Aksesibilitas

Standar WAI ARIA role="menu" nemtokake widget sing nyata , nanging iki khusus kanggo menu kaya aplikasi sing micu tumindak utawa fungsi. Menu ARIA mung bisa ngemot item menu, item menu kothak centhang, item menu tombol radio, grup tombol radio, lan sub-menu.

Dropdown Bootstrap, ing sisih liya, dirancang kanggo umum lan bisa ditrapake kanggo macem-macem kahanan lan struktur markup. Contone, sampeyan bisa nggawe dropdown sing ngemot input tambahan lan kontrol formulir, kayata kolom telusuran utawa formulir login. Mulane, Bootstrap ora ngarep-arep (utawa kanthi otomatis nambah) samubarang rolelan aria-atribut sing dibutuhake kanggo menu ARIA sing bener. Penulis kudu nyakup atribut sing luwih spesifik iki.

Nanging, Bootstrap nambahake dhukungan sing dibangun kanggo umume interaksi menu keyboard standar, kayata kemampuan kanggo mindhah .dropdown-itemunsur individu nggunakake tombol kursor lan nutup menu nganggo ESCtombol.

Tuladha

Bungkus pilihan gulung mudhun (tombol utawa link sampeyan) lan menu gulung mudhun ing .dropdown, utawa unsur liyane sing nyatakake position: relative;. Dropdown bisa dipicu saka <a>utawa <button>unsur supaya luwih cocog karo kabutuhan potensial sampeyan. Conto sing ditampilake ing kene nggunakake <ul>unsur semantik yen cocog, nanging markup khusus didhukung.

Tombol tunggal

Sembarang .btnsiji bisa diowahi dadi pilihan gulung mudhun kanthi sawetara owah-owahan markup. Mangkene carane sampeyan bisa nggarap <button>unsur kasebut:

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>

Lan karo <a>unsur:

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>

Sisih paling apik yaiku sampeyan bisa nindakake iki karo varian tombol apa wae:

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

Tombol pamisah

Kajaba iku, nggawe dropdown tombol pamisah kanthi markup sing meh padha karo dropdown tombol siji, nanging kanthi tambahan .dropdown-toggle-splitkanggo jarak sing tepat ing sekitar caret molor.

Kita nggunakake kelas ekstra iki kanggo nyuda horisontal paddinging salah siji sisih caret karo 25% lan mbusak margin-leftsing ditambahake kanggo dropdowns tombol biasa. Owah-owahan ekstra kasebut njaga karet pusat ing tombol pamisah lan nyedhiyakake area hit sing luwih cocog ing jejere tombol utama.

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

ukuran

Tombol dropdown bisa digunakake karo tombol kabeh ukuran, kalebu tombol gulung standar lan pamisah.

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

Milih dropdown sing luwih peteng kanggo cocog karo navbar peteng utawa gaya khusus kanthi nambahake .dropdown-menu-darkmenyang .dropdown-menu. Ora ana owah-owahan ing item gulung mudhun.

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>

Lan nggunakake ing 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>

arah

RTL

Arah dicerminake nalika nggunakake Bootstrap ing RTL, tegese .dropstartbakal katon ing sisih tengen.

Pusat

Gawe menu gulung mudhun ing sisih ngisor pilihan karo .dropdown-centerunsur induk.

html

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

Dropup

Micu menu gulung mudhun ing ndhuwur unsur kanthi nambahake .dropupmenyang unsur induk.

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

Nggawe menu gulung munggah ing tengah ndhuwur pilihan karo .dropup-centering unsur induk.

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

Micu menu gulung mudhun ing sisih tengen unsur kanthi nambahake .dropendmenyang unsur induk.

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

Micu menu gulung mudhun ing sisih kiwa unsur kanthi nambahake .dropstartmenyang unsur induk.

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

Sampeyan bisa nggunakake <a>utawa <button>unsur minangka item gulung mudhun.

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>

Sampeyan uga bisa nggawe item dropdown non-interaktif karo .dropdown-item-text. Bebas bae kanggo gaya luwih karo CSS khusus utawa keperluan teks.

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>

Aktif

Tambah .activemenyang item ing gulung mudhun kanggo gaya minangka aktif . Kanggo ngirim status aktif menyang teknologi assistive, gunakake aria-currentatribut - nggunakake pagenilai kanggo kaca saiki, utawa truekanggo item saiki ing set.

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>

dipatèni

Tambah .disabledmenyang item ing gulung mudhun kanggo gaya minangka dipatèni .

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>

Kanthi gawan, menu gulung mudhun kanthi otomatis dipanggonke 100% saka ndhuwur lan ing sisih kiwa wong tuwa. Sampeyan bisa ngganti iki karo .drop*kelas pituduh, nanging sampeyan uga bisa ngontrol karo kelas modifier tambahan.

Tambah .dropdown-menu-endmenyang .dropdown-menusisih tengen menu gulung mudhun. Arah dicerminake nalika nggunakake Bootstrap ing RTL, tegese .dropdown-menu-endbakal katon ing sisih kiwa.

Kepala munggah! Dropdowns dipanggonke thanks Popper kajaba lagi sing ana ing navbar a.

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>

Alignment responsif

Yen sampeyan pengin nggunakake keselarasan responsif, mateni posisi dinamis kanthi nambah data-bs-display="static"atribut lan gunakake kelas variasi responsif.

Kanggo nyelarasake tengen menu gulung mudhun karo breakpoint utawa luwih gedhe, tambahake .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>

Kanggo nyelarasake kiwa menu molor karo breakpoint diwenehi utawa luwih gedhe, nambah .dropdown-menu-endlan .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>

Elinga yen sampeyan ora perlu nambah data-bs-display="static"atribut kanggo tombol gulung mudhun ing navbar, amarga Popper ora digunakake ing navbar.

Pilihan Alignment

Njupuk akeh pilihan sing ditampilake ing ndhuwur, iki demo sink pawon cilik saka macem-macem pilihan alignment gulung mudhun ing sak panggonan.

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>

Headers

Tambah header kanggo menehi label bagean tumindak ing menu gulung mudhun.

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>

Pembagi

Pisah klompok item menu sing gegandhengan karo divider.

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>

Teks

Selehake sembarang teks freeform ing menu gulung mudhun karo teks lan nggunakake spasi utilitas . Elinga yen sampeyan mbutuhake gaya ukuran tambahan kanggo mbatesi ambane 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>

Formulir

Sijine formulir ing menu gulung mudhun, utawa nggawe menyang menu gulung mudhun, lan nggunakake margin utawa padding keperluan kanggo menehi papan negatif sing dibutuhake.

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>

Gunakake data-bs-offsetutawa data-bs-referencekanggo ngganti lokasi gulung mudhun.

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

Kanthi gawan, menu gulung mudhun ditutup nalika ngeklik ing njero utawa njaba menu gulung mudhun. Sampeyan bisa nggunakake autoClosepilihan kanggo ngganti prilaku gulung mudhun iki.

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

Variabel

Ditambahake ing v5.2.0

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, dropdown saiki nggunakake variabel CSS lokal .dropdown-menukanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

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

Kustomisasi liwat variabel CSS bisa dideleng ing .dropdown-menu-darkkelas ing ngendi kita ngilangi nilai tartamtu tanpa nambahake pamilih CSS duplikat.

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

Variabel Sass

Variabel kanggo kabeh dropdown:

$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

Variabel kanggo dropdown peteng :

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

Variabel kanggo carets basis CSS sing nuduhake interaktivitas dropdown:

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

Campuran

Mixin digunakake kanggo ngasilake carets basis CSS lan bisa ditemokake ing 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;
    }
  }
}

Panggunaan

Liwat atribut data utawa JavaScript, plugin gulung mudhun ngganti konten sing didhelikake (menu gulung mudhun) kanthi ngganti .showkelas ing wong tuwa .dropdown-menu. Atribut data-bs-toggle="dropdown"kasebut diandelake kanggo nutup menu gulung mudhun ing tingkat aplikasi, mula luwih becik nggunakake aplikasi kasebut.

Ing piranti sing aktif tutul, mbukak dropdown nambah mouseoverpanangan kosong kanggo anak langsung saka <body>unsur. Iki hack ngakoni elek perlu kanggo ngubengi quirk ing iOS 'delegasi acara , kang digunakake bakal nyegah tunyuk ngendi wae njaba dropdown saka pemicu kode sing nutup dropdown. Sawise gulung mudhun ditutup, panangan kosong tambahan mouseoveriki dibusak.

Liwat atribut data

Tambah data-bs-toggle="dropdown"menyang link utawa tombol kanggo ngalih gulung mudhun.

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

Liwat JavaScript

Telpon dropdown liwat JavaScript:

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

`data-bs-toggle="dropdown"`isih dibutuhake

Ora preduli apa sampeyan nelpon dropdown liwat JavaScript utawa nggunakake data-api, mesthine data-bs-toggle="dropdown"kudu ana ing unsur pemicu dropdown.

Pilihan

Minangka opsi bisa liwati liwat atribut data utawa JavaScript, sampeyan bisa nambah jeneng pilihan kanggo data-bs-, kaya ing data-bs-animation="{value}". Priksa manawa kanggo ngganti jinis kasus jeneng pilihan saka " camelCase " kanggo " kebab-case " nalika ngliwati pilihan liwat atribut data. Contone, nggunakake data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Ing Bootstrap 5.2.0, kabeh komponen ndhukung atribut data sing dilindhungi eksperimendata-bs-config sing bisa ngemot konfigurasi komponen sing prasaja minangka string JSON. Nalika unsur duwe data-bs-config='{"delay":0, "title":123}'lan data-bs-title="456"atribut, titlenilai pungkasan bakal 456lan atribut data sing kapisah bakal ngilangi nilai sing diwenehake ing data-bs-config. Kajaba iku, atribut data sing ana bisa ngemot nilai JSON kaya data-bs-delay='{"show":0,"hide":150}'.

jeneng	Jinis	Default	Katrangan
`autoClose`	boolean, string	`true`	Konfigurasi prilaku nutup otomatis saka gulung mudhun: `true`- gulung mudhun bakal ditutup kanthi ngeklik ing njaba utawa ing menu gulung mudhun. `false`- dropdown bakal ditutup kanthi ngeklik tombol pilihan lan nelpon `hide`utawa `toggle`cara manual. (Uga ora bakal ditutup kanthi mencet `esc`tombol) `'inside'`- gulung mudhun bakal ditutup (mung) kanthi ngeklik ing menu gulung mudhun. `'outside'`- dropdown bakal ditutup (mung) kanthi ngeklik njaba menu gulung mudhun. Cathetan: dropdown tansah bisa ditutup nganggo `ESC`tombol.
`boundary`	string, unsur	`'clippingParents'`	Watesan watesan overflow saka menu gulung mudhun (mung ditrapake kanggo modifier preventOverflow Popper). Kanthi gawan, iku `clippingParents`lan bisa nampa referensi HTMLElement (mung liwat JavaScript). Kanggo informasi luwih lengkap waca docs detectOverflow Popper .
`display`	senar	`'dynamic'`	Kanthi gawan, kita nggunakake Popper kanggo posisi dinamis. Pateni iki nganggo `static`.
`offset`	array, string, fungsi	`[0, 2]`	Offset saka dropdown relatif kanggo target. Sampeyan bisa ngliwati senar ing atribut data kanthi nilai sing dipisahake koma kaya: `data-bs-offset="10,20"`. Nalika fungsi digunakake kanggo nemtokake offset, diarani obyek sing ngemot panggonan popper, referensi, lan popper rects minangka argumen pisanan. Node DOM unsur pemicu dilewati minangka argumen kapindho. Fungsi kasebut kudu ngasilake array kanthi rong nomer: skidding , distance . Kanggo informasi luwih lengkap waca docs offset Popper .
`popperConfig`	null, obyek, fungsi	`null`	Kanggo ngganti konfigurasi Popper standar Bootstrap, ndeleng konfigurasi Popper . Nalika fungsi digunakake kanggo nggawe konfigurasi Popper, diarani obyek sing ngemot konfigurasi Popper standar Bootstrap. Iki mbantu sampeyan nggunakake lan nggabungake standar karo konfigurasi sampeyan dhewe. Fungsi kasebut kudu ngasilake obyek konfigurasi kanggo Popper.
`reference`	string, unsur, obyek	`'toggle'`	Unsur referensi saka menu gulung mudhun. Nampa nilai `'toggle'`, `'parent'`, referensi HTMLElement utawa obyek sing nyedhiyakake `getBoundingClientRect`. Kanggo informasi luwih lengkap, deleng dokumen konstruktor Popper lan dokumen unsur virtual .

Nggunakake fungsi karo`popperConfig`

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

Metode

Metode	Katrangan
`dispose`	Ngancurake dropdown unsur. (Mbusak data sing disimpen ing unsur DOM)
`getInstance`	Cara statis sing ngidini sampeyan entuk conto dropdown sing ana gandhengane karo unsur DOM, sampeyan bisa nggunakake kaya iki: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Cara statis sing ngasilake conto dropdown sing digandhengake karo unsur DOM utawa nggawe sing anyar yen ora diwiwiti. Sampeyan bisa nggunakake kaya iki: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Ndhelikake menu gulung mudhun saka navbar utawa pandhu arah tab.
`show`	Nuduhake menu gulung mudhun navbar utawa pandhu arah tab.
`toggle`	Ngalih menu gulung mudhun saka navbar utawa pandhu arah tab.
`update`	Nganyari posisi gulung mudhun unsur.

Acara

Kabeh acara gulung mudhun dipecat ing unsur toggling banjur gelembung munggah. Supaya sampeyan uga bisa nambah pamireng acara ing .dropdown-menuunsur induk 's. hide.bs.dropdownlan hidden.bs.dropdownacara duwe clickEventproperti (mung nalika jinis Acara asli click) sing ngemot Obyek Acara kanggo acara klik.

Jenis acara	Katrangan
`hide.bs.dropdown`	Langsung murub nalika `hide`cara conto wis diarani.
`hidden.bs.dropdown`	Dipecat nalika dropdown wis rampung didhelikake saka pangguna lan transisi CSS wis rampung.
`show.bs.dropdown`	Langsung murub nalika `show`metode conto diarani.
`shown.bs.dropdown`	Dipecat nalika dropdown wis katon kanggo pangguna lan transisi CSS wis rampung.

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

Dropdowns

Ringkesan

Aksesibilitas

Tuladha

Tombol tunggal

Tombol pamisah

ukuran

Dropdown peteng

arah

RTL

Pusat

Dropup

Dropup centered

Dropend

Dropstart

Item menu

Aktif

dipatèni

Alignment menu

Alignment responsif

Pilihan Alignment

Isi menu

Headers

Pembagi

Teks

Formulir

Auto nutup prilaku

CSS

Variabel

Variabel Sass

Campuran

Panggunaan

Liwat atribut data

Liwat JavaScript

`data-bs-toggle="dropdown"`isih dibutuhake

Pilihan

Nggunakake fungsi karo`popperConfig`

Metode

Acara

Dropdowns

Ringkesan

Aksesibilitas

Tuladha

Tombol tunggal

Tombol pamisah

ukuran

Dropdown peteng

arah

RTL

Pusat

Dropup

Dropup centered

Dropend

Dropstart

Item menu

Aktif

dipatèni

Alignment menu

Alignment responsif

Pilihan Alignment

Isi menu

Headers

Header gulung mudhun

Pembagi

Teks

Formulir

Pilihan gulung mudhun

Auto nutup prilaku

CSS

Variabel

Variabel Sass

Campuran

Panggunaan

Liwat atribut data

Liwat JavaScript

data-bs-toggle="dropdown"isih dibutuhake

Pilihan

Nggunakake fungsi karopopperConfig

Metode

Acara

`data-bs-toggle="dropdown"`isih dibutuhake

Nggunakake fungsi karo`popperConfig`