açılır menüler

Bootstrap açılır eklentisi ile bağlantı listelerini ve daha fazlasını görüntülemek için bağlamsal bindirmeleri açın.

Bu sayfada

genel bakış

Açılır listeler, bağlantı listelerini ve daha fazlasını görüntülemek için değiştirilebilir, bağlamsal bindirmelerdir. Dahil edilen Bootstrap açılır JavaScript eklentisi ile etkileşimli hale getirilirler. Fareyle üzerine gelinerek değil, tıklatılarak değiştirilirler; bu kasıtlı bir tasarım kararıdır .

Açılır listeler , dinamik konumlandırma ve görünüm alanı algılaması sağlayan Popper adlı üçüncü taraf kitaplığı üzerine kuruludur . Popper.min.js dosyasını Bootstrap'ın JavaScript'inden önce eklediğinizden veya Popper içeren bootstrap.bundle.min.js/ öğesini kullandığınızdan emin olun . bootstrap.bundle.jsPopper, dinamik konumlandırma gerekli olmadığı için gezinme çubuklarındaki açılır menüleri konumlandırmak için kullanılmaz.

Ulaşılabilirlik

WAI ARIA standardı, gerçek bir pencere öğesi tanımlar , role="menu"ancak bu, eylemleri veya işlevleri tetikleyen uygulama benzeri menülere özeldir. ARIA menüleri yalnızca menü öğelerini, onay kutusu menü öğelerini, radyo düğmesi menü öğelerini, radyo düğmesi gruplarını ve alt menüleri içerebilir.

Bootstrap'in açılır listeleri ise genel olacak ve çeşitli durumlara ve işaretleme yapılarına uygulanabilir olacak şekilde tasarlanmıştır. Örneğin, arama alanları veya oturum açma formları gibi ek girdiler ve form kontrolleri içeren açılır menüler oluşturmak mümkündür. Bu nedenle Bootstrap, gerçek ARIA menüleri için gerekli roleand aria-özniteliklerinin hiçbirini beklemez (veya otomatik olarak eklemez) . Yazarların bu daha spesifik özellikleri kendilerinin dahil etmesi gerekecektir.

.dropdown-itemAncak Bootstrap , imleç tuşlarını kullanarak tek tek öğeler arasında hareket etme ve tuşla menüyü kapatma gibi çoğu standart klavye menüsü etkileşimi için yerleşik destek ekler ESC.

Örnekler

Açılır menünün geçişini (düğmeniz veya bağlantınız) ve içindeki açılır menüyü .dropdownveya bildiren başka bir öğeyi sarın position: relative;. Potansiyel ihtiyaçlarınıza daha iyi uyması için açılır öğeler <a>veya öğelerden tetiklenebilir . <button>Burada gösterilen örnekler <ul>, uygun olduğunda anlamsal öğeler kullanır, ancak özel işaretleme desteklenir.

Tek düğme

Herhangi bir single .btn, bazı biçimlendirme değişiklikleriyle açılır bir geçişe dönüştürülebilir. Bunları her iki öğeyle de nasıl çalıştırabileceğiniz aşağıda açıklanmıştır <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>

Ve <a>elemanlarla:

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>

En iyi yanı, bunu herhangi bir düğme varyantıyla da yapabilmenizdir:

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

Böl düğmesi

Benzer şekilde, tek düğmeli açılır menülerle hemen hemen aynı işaretlemeyle, ancak .dropdown-toggle-splitaçılır düzeltme işaretinin etrafına uygun boşluk eklenmesiyle bölünmüş düğme açılır listeleri oluşturun.

Bu ekstra sınıfı padding, düzeltme işaretinin her iki tarafındaki yatay çizgiyi %25 oranında azaltmak ve margin-leftnormal düğme açılır menüleri için eklenenleri kaldırmak için kullanıyoruz. Bu ekstra değişiklikler, düzeltme işaretini bölme düğmesinin ortasında tutar ve ana düğmenin yanında daha uygun boyutta bir vuruş alanı sağlar.

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

boyutlandırma

Düğme açılır menüleri, varsayılan ve bölünmüş açılır düğmeler dahil olmak üzere tüm boyutlardaki düğmelerle çalışır.

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

Karanlık açılır menüler

Bir karanlık gezinme çubuğuna veya .dropdown-menu-darkmevcut bir .dropdown-menu. Açılır öğelerde herhangi bir değişiklik yapılması gerekmez.

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>

Ve onu bir gezinme çubuğunda kullanmak için koymak:

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>

Talimatlar

sağdan sola

RTL'de Bootstrap kullanılırken yönergeler yansıtılır, yani .dropstartsağ tarafta görünür.

ortalanmış

Açılır menüyü, ana öğedeki ile geçişin altında ortalayın .dropdown-center.

html

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

açılan

.dropupAna öğeye ekleyerek öğelerin üzerindeki açılır menüleri tetikleyin .

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

Drop-up merkezli

Açılır menüyü, ana öğedeki ile geçişin üzerinde ortalayın .dropup-center.

html

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

Dropend

.dropendAna öğeye ekleyerek öğelerin sağındaki açılır menüleri tetikleyin .

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

.dropstartAna öğeye ekleyerek öğelerin solundaki açılır menüleri tetikleyin .

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

<a>or <button>öğelerini açılır öğeler olarak kullanabilirsiniz .

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>

ile etkileşimli olmayan açılır öğeler de oluşturabilirsiniz .dropdown-item-text. Özel CSS veya metin yardımcı programları ile daha fazla stil vermekten çekinmeyin.

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

Etkin olarak stil.active vermek için açılır menüdeki öğelere ekleyin . Etkin durumu yardımcı teknolojilere aktarmak için, geçerli sayfanın veya bir kümedeki geçerli öğenin değerini kullanarak özniteliği kullanın.aria-currentpagetrue

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>

Engelli

Devre dışı bırakılmış olarak.disabled biçimlendirmek için açılır menüdeki öğelere ekleyin .

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>

Varsayılan olarak, bir açılır menü otomatik olarak üst öğesinin üst kısmından ve sol tarafında %100 olarak konumlandırılır. Bunu yön .drop*sınıfları ile değiştirebilirsiniz, ancak bunları ek değiştirici sınıflarla da kontrol edebilirsiniz.

.dropdown-menu-enda'ya ekle .dropdown-menuaçılır menüyü sağa hizalayın. RTL'de Bootstrap kullanılırken yönergeler yansıtılır, yani .dropdown-menu-endsol tarafta görünür.

Önüne bak! Açılır menüler, bir gezinme çubuğunda bulunmaları dışında Popper sayesinde konumlandırılır.

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>

Duyarlı hizalama

Duyarlı hizalamayı kullanmak istiyorsanız, data-bs-display="static"özniteliği ekleyerek dinamik konumlandırmayı devre dışı bırakın ve duyarlı varyasyon sınıflarını kullanın.

Açılır menüyü verilen veya daha büyük kesme noktasıyla sağa hizalamak için ekleyin .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>

Açılır menüyü verilen kesme noktası veya daha büyük bir değerle sola hizalamak için .dropdown-menu-endve ekleyin .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

data-bs-display="static"Gezinti çubuklarında Popper kullanılmadığından, gezinme çubuklarındaki açılır düğmelere bir nitelik eklemeniz gerekmediğini unutmayın.

Hizalama seçenekleri

Yukarıda gösterilen seçeneklerin çoğunu alarak, tek bir yerde çeşitli açılır hizalama seçeneklerinin küçük bir mutfak lavabosu demosunu burada bulabilirsiniz.

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>

Başlıklar

Herhangi bir açılır menüde eylemlerin bölümlerini etiketlemek için bir başlık ekleyin.

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>

Bölücüler

Bir bölücü ile ilgili menü öğelerinin ayrı grupları.

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>

Metin

Herhangi bir serbest biçimli metni, metin içeren bir açılır menüye yerleştirin ve boşluk bırakma yardımcı programlarını kullanın . Menü genişliğini sınırlamak için muhtemelen ek boyutlandırma stillerine ihtiyacınız olacağını unutmayın.

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>

Formlar

Açılır menüye bir form koyun veya bir açılır menüye dönüştürün ve ihtiyacınız olan negatif alanı vermek için kenar boşluğu veya dolgu yardımcı programlarını kullanın.

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>

Açılır listenin konumunu değiştirmek için data-bs-offsetveya öğesini kullanın .data-bs-reference

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Otomatik kapanma davranışı

Varsayılan olarak, açılır menünün içine veya dışına tıklandığında açılır menü kapatılır. autoCloseAçılır listenin bu davranışını değiştirmek için seçeneği kullanabilirsiniz .

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

Değişkenler

v5.2.0'da eklendi

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, açılır menüler artık .dropdown-menugelişmiş gerçek zamanlı özelleştirme için yerel CSS değişkenlerini kullanıyor. CSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

.dropdown-menu-darkCSS değişkenleri aracılığıyla özelleştirme, yinelenen CSS seçicileri eklemeden belirli değerleri geçersiz kıldığımız sınıfta görülebilir .

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

Sas değişkenleri

Tüm açılır listeler için değişkenler:

$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

Karanlık açılır liste için değişkenler :

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

Bir açılır listenin etkileşimini gösteren CSS tabanlı şapka işaretleri için değişkenler:

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

karışımlar

Mixin'ler, CSS tabanlı şapkaları oluşturmak için kullanılır ve 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;
    }
  }
}

kullanım

Veri öznitelikleri veya JavaScript aracılığıyla, açılır eklenti, .showsınıfı üst öğe üzerinde değiştirerek gizli içeriği (açılır menüler) değiştirir .dropdown-menu. Bu data-bs-toggle="dropdown"öznitelik, uygulama düzeyinde açılır menüleri kapatmak için kullanılır, bu nedenle her zaman kullanmak iyi bir fikirdir.

Dokunmatik özellikli cihazlarda, bir açılır listenin açılması , öğenin mouseoveren yakın alt öğelerine boş işleyiciler ekler <body>. Bu kuşkusuz çirkin hack, iOS'un olay delegasyonundaki bir tuhaflığı gidermek için gereklidir; aksi takdirde, açılır listenin dışındaki herhangi bir yere dokunmanın, açılır menüyü kapatan kodu tetiklemesini engeller. Açılır menü kapatıldığında, bu ek boş mouseoverişleyiciler kaldırılır.

Veri öznitelikleri aracılığıyla

data-bs-toggle="dropdown"Bir açılır liste arasında geçiş yapmak için bir bağlantıya veya düğmeye ekleyin .

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

JavaScript aracılığıyla

JavaScript aracılığıyla açılır listeleri arayın:

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

`data-bs-toggle="dropdown"`hala gerekli

Açılır listenizi JavaScript aracılığıyla aramanıza veya bunun yerine data-api'yi kullanmanıza bakılmaksızın, açılır data-bs-toggle="dropdown"listenin tetikleyici öğesinde her zaman bulunması gerekir.

Seçenekler

Seçenekler veri öznitelikleri veya JavaScript aracılığıyla iletilebildiğinden data-bs-, örneğinde olduğu gibi öğesine bir seçenek adı ekleyebilirsiniz data-bs-animation="{value}". Seçenekleri veri öznitelikleri üzerinden geçirirken , seçenek adının “ camelCase ” yerine “ kebab-case ” olarak değiştirildiğinden emin olun. Örneğin, data-bs-custom-class="beautifier"yerine kullanın data-bs-customClass="beautifier".

Bootstrap 5.2.0'dan itibaren, tüm bileşenler , bir JSON dizesi olarak basit bileşen yapılandırmasını barındırabilen deneysel bir ayrılmış veri özniteliğini destekler. data-bs-configBir öğe data-bs-config='{"delay":0, "title":123}'ve data-bs-title="456"özniteliklere sahip olduğunda, nihai titledeğer olacak 456ve ayrı veri öznitelikleri üzerinde verilen değerleri geçersiz kılacaktır data-bs-config. Ek olarak, mevcut veri öznitelikleri, gibi JSON değerlerini barındırabilir data-bs-delay='{"show":0,"hide":150}'.

İsim	Tip	Varsayılan	Tanım
`autoClose`	boole, dize	`true`	Açılır listenin otomatik kapanma davranışını yapılandırın: `true`- açılır menünün dışına veya içine tıklandığında açılır menü kapatılacaktır. `false`- açılır menü, geçiş düğmesine tıklanarak ve manuel olarak çağrı `hide`veya `toggle`yöntem kullanılarak kapatılacaktır. (Ayrıca tuşuna basılarak kapatılmayacaktır `esc`) `'inside'`- açılır menü (yalnızca) açılır menünün içine tıklandığında kapatılacaktır. `'outside'`- açılır menü (yalnızca) açılır menünün dışına tıklandığında kapatılacaktır. `ESC`Not: açılır menü her zaman tuşuyla kapatılabilir .
`boundary`	dizi, eleman	`'clippingParents'`	Açılır menünün taşma kısıtlaması sınırı (yalnızca Popper'ın önlemeOverflow değiştiricisi için geçerlidir). Varsayılan olarak `clippingParents`bir HTMLElement referansını kabul eder ve kabul edebilir (yalnızca JavaScript aracılığıyla). Daha fazla bilgi için Popper'ınDetectOverflow belgelerine bakın .
`display`	sicim	`'dynamic'`	Varsayılan olarak, dinamik konumlandırma için Popper kullanıyoruz. ile devre dışı bırakın `static`.
`offset`	dizi, dizi, işlev	`[0, 2]`	Açılan listenin hedefine göre ofseti. Aşağıdaki gibi virgülle ayrılmış değerlerle veri özniteliklerinde bir dize iletebilirsiniz: `data-bs-offset="10,20"`. Ofseti belirlemek için bir fonksiyon kullanıldığında, ilk argümanı olarak popper yerleşimini, referansı ve popper rect'lerini içeren bir nesne ile çağrılır. Tetikleyici öğe DOM düğümü, ikinci argüman olarak iletilir. İşlev, iki sayı içeren bir dizi döndürmelidir: kayma , mesafe . Daha fazla bilgi için Popper'ın ofset belgelerine bakın .
`popperConfig`	boş, nesne, işlev	`null`	Bootstrap'in varsayılan Popper yapılandırmasını değiştirmek için, Popper'ın yapılandırmasına bakın . Popper konfigürasyonunu oluşturmak için bir fonksiyon kullanıldığında, Bootstrap'in varsayılan Popper konfigürasyonunu içeren bir nesne ile çağrılır. Varsayılanı kendi yapılandırmanızla kullanmanıza ve birleştirmenize yardımcı olur. İşlev, Popper için bir yapılandırma nesnesi döndürmelidir.
`reference`	dize, eleman, nesne	`'toggle'`	Açılır menünün referans öğesi. Bir HTMLElement başvurusunun veya sağlayan bir nesnenin `'toggle'`, , değerlerini kabul eder . Daha fazla bilgi için Popper'ın yapıcı belgelerine ve sanal öğe belgelerine bakın .`'parent'getBoundingClientRect`

ile işlevi kullanma`popperConfig`

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

yöntemler

Yöntem	Tanım
`dispose`	Bir öğenin açılır menüsünü yok eder. (DOM öğesinde depolanan verileri kaldırır)
`getInstance`	Bir DOM öğesiyle ilişkili açılır örneği almanıza izin veren statik yöntem, bunu şu şekilde kullanabilirsiniz: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Bir DOM öğesiyle ilişkili açılır bir örnek döndüren veya başlatılmamış olması durumunda yeni bir tane oluşturan statik yöntem. Bunu şu şekilde kullanabilirsiniz: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Belirli bir gezinme çubuğunun veya sekmeli gezinmenin açılır menüsünü gizler.
`show`	Belirli bir gezinme çubuğunun veya sekmeli gezinmenin açılır menüsünü gösterir.
`toggle`	Belirli bir gezinme çubuğunun veya sekmeli gezinmenin açılır menüsünü değiştirir.
`update`	Bir öğenin açılır listesinin konumunu günceller.

Olaylar

Tüm açılır liste olayları, geçiş öğesinde tetiklenir ve ardından kabarcıklanır. .dropdown-menuBöylece, 'nin ana öğesine olay dinleyicileri de ekleyebilirsiniz . hide.bs.dropdownve hidden.bs.dropdownolayların , click olayı için bir Olay Nesnesi içeren bir clickEventözelliği vardır (yalnızca orijinal Olay türü olduğunda ).click

Etkinlik tipi	Tanım
`hide.bs.dropdown`	`hide`Örnek yöntemi çağrıldığında hemen tetiklenir .
`hidden.bs.dropdown`	Açılır listenin kullanıcıdan gizlenmesi bittiğinde ve CSS geçişleri tamamlandığında tetiklenir.
`show.bs.dropdown`	`show`Örnek yöntemi çağrıldığında hemen tetiklenir .
`shown.bs.dropdown`	Açılır menü kullanıcıya görünür hale getirildiğinde ve CSS geçişleri tamamlandığında tetiklenir.

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

açılır menüler

genel bakış

Ulaşılabilirlik

Örnekler

Tek düğme

Böl düğmesi

boyutlandırma

Karanlık açılır menüler

Talimatlar

sağdan sola

ortalanmış

açılan

Drop-up merkezli

Dropend

Dropstart

Menü öğeleri

Aktif

Engelli

Menü hizalama

Duyarlı hizalama

Hizalama seçenekleri

Menü içeriği

Başlıklar

Bölücüler

Metin

Formlar

Otomatik kapanma davranışı

CSS

Değişkenler

Sas değişkenleri

karışımlar

kullanım

Veri öznitelikleri aracılığıyla

JavaScript aracılığıyla

`data-bs-toggle="dropdown"`hala gerekli

Seçenekler

ile işlevi kullanma`popperConfig`

yöntemler

Olaylar

açılır menüler

genel bakış

Ulaşılabilirlik

Örnekler

Tek düğme

Böl düğmesi

boyutlandırma

Karanlık açılır menüler

Talimatlar

sağdan sola

ortalanmış

açılan

Drop-up merkezli

Dropend

Dropstart

Menü öğeleri

Aktif

Engelli

Menü hizalama

Duyarlı hizalama

Hizalama seçenekleri

Menü içeriği

Başlıklar

Açılır başlık

Bölücüler

Metin

Formlar

Açılır seçenekler

Otomatik kapanma davranışı

CSS

Değişkenler

Sas değişkenleri

karışımlar

kullanım

Veri öznitelikleri aracılığıyla

JavaScript aracılığıyla

data-bs-toggle="dropdown"hala gerekli

Seçenekler

ile işlevi kullanmapopperConfig

yöntemler

Olaylar

`data-bs-toggle="dropdown"`hala gerekli

ile işlevi kullanma`popperConfig`