Bootstrap Dropdowns (açılır menüler), kullanıcıların gizli içeriğe erişmesine olanak tanır. Açılır menüler, gezinme çubuklarında veya bağımsız bileşenler olarak kullanılabilir. Dinamik içerik sunmak ve menü öğelerini düzenlemek için oldukça kullanışlıdır.
Temel Kullanım
Bir açılır menü oluşturmak için .dropdown sınıfı kullanılır. Menü, genellikle bir düğme ile tetiklenir ve içerik .dropdown-menu sınıfıyla tanımlanır.
Örnek:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Açılır Menü
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Birinci Seçenek</a></li>
<li><a class="dropdown-item" href="#">İkinci Seçenek</a></li>
<li><a class="dropdown-item" href="#">Üçüncü Seçenek</a></li>
</ul>
</div>
Dropdown Seçenekleri
1. Başlık İçeren Menü: Menü öğelerine bir başlık eklemek için .dropdown-header sınıfı kullanılabilir.
Örnek:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Başlıklı Menü
</button>
<ul class="dropdown-menu">
<h6 class="dropdown-header">Menü Başlığı</h6>
<li><a class="dropdown-item" href="#">Seçenek 1</a></li>
<li><a class="dropdown-item" href="#">Seçenek 2</a></li>
</ul>
</div>
2. Ayrılmış Menüler: Menü öğelerini ayırmak için .dropdown-divider sınıfı kullanılabilir.
Örnek:
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Ayrılmış Menü
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Seçenek 1</a></li>
<li><a class="dropdown-item" href="#">Seçenek 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Seçenek 3</a></li>
</ul>
</div>
Dropdown Hizalama
Menüyü sağa hizalamak için .dropdown-menu-end sınıfı kullanılır.
Örnek:
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Sağa Hizalı Menü
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Seçenek 1</a></li>
<li><a class="dropdown-item" href="#">Seçenek 2</a></li>
</ul>
</div>
Dropdown Düğme Grupları
Dropdown, düğme grubu içinde kullanılabilir.
Örnek:
<div class="btn-group">
<button type="button" class="btn btn-success">Ana Düğme</button>
<button type="button" class="btn btn-success 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="#">Seçenek 1</a></li>
<li><a class="dropdown-item" href="#">Seçenek 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Seçenek 3</a></li>
</ul>
</div>
Dropdown Durumları ve Aktif Seçenekler
Dropdown içinde aktif bir öğe belirtmek için .active sınıfı, pasif bir öğe için ise .disabled sınıfı kullanılır.
Örnek:
<div class="dropdown">
<button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Durumlu Menü
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item active" href="#">Aktif Seçenek</a></li>
<li><a class="dropdown-item disabled" href="#">Pasif Seçenek</a></li>
<li><a class="dropdown-item" href="#">Normal Seçenek</a></li>
</ul>
</div>
Responsive Dropdownlar
Bootstrap, açılır menülerin farklı cihazlarda sorunsuz çalışmasını sağlar. Mobil uyumlu menülerde, içeriğin görünürlüğünü korumak için .dropdown-menu sınıfıyla birlikte duyarlılık özellikleri kullanılabilir.