Bootstrap Dropdowns

Bootstrap 4 ile dropdown menülerini kolaylıkla hazırlayıp, kullanıcılara önceden tanımlanmış bir liste üzerinden seçim yaptırabiliriz.

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>

Örnek 1 için tıklayınız.

Bootstrap 4 ile dropdown menüsü oluşturabilmek için .dropdown sınıfını <div> etiketine verdikten sonra açılır menüyü tetikleyecek olan link için .dropdown-toggle sınıfı ve data-toggle="dropdown" özelliği kullanılmalıdır.

Açılacak olan menü kapsamını temsil edecek <div> etiketi için .dropdown-menu sınıfı ve her bir alt eleman için ise .dropdown-item sınıfını kullanmalıyız.

Dropdown Divider

Dropdown menü elemanlarının her biri arasına .dropdown-divider sınıfı ile bir ayraç ekleyebiliriz. 

<div class="dropdown-divider"></div>

 Örnek 2 için tıklayınız.

Dropdown Header

Bootstrap dropdown menünün belli elemanlarını gruplayıp her bir gruba bir başlık ekleyebiliriz.

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <h5 class="dropdown-header">Dropdown header</h5>
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
      <h5 class="dropdown-header">Dropdown header</h5>
      <a class="dropdown-item" href="#">Another link</a>
    </div>
  </div>

 Örnek 3 için tıklayınız.

Dropdown Aktif ve Pasif Link

Bootstrap dropdown elemanlarının her birine .active ya da .disabled sınıflarını ekleyerek aktif ya da pasif hale getirebiliriz.

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Normal</a>
      <a class="dropdown-item active" href="#">Active</a>
      <a class="dropdown-item disabled" href="#">Disabled</a>
    </div>
  </div>

 Örnek 4 için tıklayınız.

Bootstrap Button Groups

Bootstrap button group' laru ile dropdown butonlarını beraber kullanabiliriz.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

 Örnek 5 için tıklayınız.

Split Button Dropdowns

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>

 Örnek 6 için tıklayınız.

Vertical Button Groups

Bootstrap dropdown butonlarını button group içerisine alıp .btn-group-vertical sınıfını kullanarak dikey açılır menü oluşturabiliriz.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

 Örnek 7 için tıklayınız.