Bootstrap Dropdowns (Açılır Menüler)

Web tasarımı öğrenme serüvenimizde, kullanıcı arayüzünü (UI) temiz tutmanın ve sayfada yer tasarrufu sağlamanın en popüler yollarından biri olan Bootstrap Dropdowns (Açılır Menüler) bileşenine geldik. İster bir e-ticaret sitesindeki “Kategoriler” menüsü olsun, ister kullanıcı giriş yaptıktan sonra sağ üstte beliren “Profilim” alanı olsun; açılır menüler modern web tasarımının vazgeçilmez bir parçasıdır.

Bootstrap 5, arama motoru optimizasyonu (SEO) dostu, erişilebilir (accessibility) ve her ekrana kusursuz uyum sağlayan açılır menüler oluşturmak için son derece pratik bir altyapı sunar. Bu rehberde, Bootstrap ile açılır menülerin nasıl oluşturulduğunu, önceki sürümlere göre nelerin değiştiğini, renk temalarını ve gelişmiş hizalama özelliklerini bol örnekle sıfırdan öğreneceğiz.

1. Dropdown (Açılır Menü) Nedir ve Nasıl Çalışır?

Açılır menüler; kullanıcının bir butona veya bağlantıya tıklamasıyla aşağıya (veya yana) doğru açılan, içerisinde çeşitli linkler, formlar veya aksiyon butonları barındıran geçişli (toggleable) menülerdir.

Önemli Bir Kural (Popper.js): Bootstrap’te açılır menülerin ekrandaki konumlarını (taşıp taşmadıklarını, ekranın neresinde açılacaklarını) hesaplamak için Popper.js adında harici bir JavaScript kütüphanesi kullanılır. Eğer projeye Bootstrap’i CDN üzerinden dahil ediyorsanız, mutlaka içinde Popper.js’i barındıran bootstrap.bundle.min.js dosyasını çağırdığınızdan emin olmalısınız.

2. Temel Açılır Menü Oluşturma

Bir açılır menü oluşturmak için temel HTML etiketlerini belirli Bootstrap sınıfları ile sarmalamamız gerekir.

• .dropdown: Tüm menüyü ve butonu saran en dış kapsayıcıdır.
• .dropdown-toggle: Menüyü açacak olan butona eklenir. Otomatik olarak aşağı bakan küçük bir ok (caret) simgesi oluşturur.
• data-bs-toggle="dropdown": Açılır menüyü tetikleyen asıl JavaScript komutudur. (Ekran okuyucular ve SEO için aria-expanded="false" niteliği ile birlikte kullanılır).
• .dropdown-menu: Gizli olan ve tıklandığında açılan listeyi temsil eder.
• .dropdown-item: Listenin içindeki her bir tıklanabilir elemana verilen sınıftır. Bootstrap 5 ile birlikte bu elemanların <li> etiketleri içine sarılması desteklenmekte ve tavsiye edilmektedir.

Temel Örnek:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Hizmetlerimiz
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Web Tasarım</a></li>
    <li><a class="dropdown-item" href="#">SEO Danışmanlığı</a></li>
    <li><a class="dropdown-item" href="#">Sosyal Medya</a></li>
  </ul>
</div>

3. Bootstrap 5 ile Gelen Hayati Yenilikler

Eğer daha önce Bootstrap 4 kullandıysanız, Bootstrap 5’e geçerken bilmeniz gereken çok kritik yapısal değişiklikler (migration) bulunmaktadır:

• jQuery’ye Veda: Bootstrap 5, ağır bir kütüphane olan jQuery bağımlılığını tamamen ortadan kaldırmış ve Saf (Vanilla) JavaScript’e geçiş yapmıştır. Bu da sayfalarınızın çok daha hızlı yüklenmesini sağlayarak SEO puanınıza (Core Web Vitals) doğrudan olumlu etki eder.
• “bs-” Ön Eki: Diğer JavaScript kütüphaneleriyle çakışmayı önlemek adına, Bootstrap 5’te veri niteliklerinin (data attributes) başına “bs-” ön eki eklenmiştir. Eskiden kullandığımız data-toggle="dropdown" kodu artık data-bs-toggle="dropdown" olmuştur.

4. Menü İçi Elemanlar: Ayırıcılar, Başlıklar ve Durumlar

Uzun bir açılır menünüz varsa, kullanıcı deneyimini (UX) iyileştirmek için menüyü bölümlere ayırmak isteyebilirsiniz.

• .dropdown-divider: Menü elemanları arasına şık, ince ve yatay bir çizgi ( <hr> ) çeker.
• .dropdown-header: Menünün içine tıklanamayan, sadece bilgi veren kalın başlıklar ekler.
• .active ve .disabled: Kullanıcının o an bulunduğu sayfayı vurgulamak için .active, tıklanmasını istemediğiniz linkler için ise .disabled sınıflarını doğrudan .dropdown-item üzerine uygulayabilirsiniz.

Gelişmiş Gerçek Dünya Örneği (Profil Menüsü):

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Hesabım
  </button>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Kullanıcı İşlemleri</h6></li>
    <li><a class="dropdown-item active" href="#" aria-current="true">Profili Görüntüle</a></li>
    <li><a class="dropdown-item" href="#">Ayarlar</a></li>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Premium'a Geç (Yakında)</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item text-danger" href="#">Güvenli Çıkış Yap</a></li>
  </ul>
</div>

5. Yönler: Dropup, Dropstart ve Dropend

Açılır menülerin her zaman aşağıya açılması gerekmez. Eğer butonunuz sayfanın en altındaysa menüyü yukarıya, ekranın sağındaysa sola doğru açmak isteyebilirsiniz. Kapsayıcıdaki .dropdown sınıfını değiştirerek yönü belirleyebilirsiniz:

• .dropup: Menü yukarı doğru açılır. Ok işareti de yukarı bakar.
• .dropend: Menü sağa doğru açılır.
• .dropstart: Menü sola doğru açılır.

<!-- Yukarı Açılan Menü -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Yukarı Açıl
  </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>
  </ul>
</div>

6. Hizalama ve Evrensel RTL (Sağdan Sola) Desteği

Açılır menüler varsayılan olarak butonun sol kenarından hizalanarak aşağı sarkar. Eğer menünün sağ kenarından hizalanmasını istiyorsanız, .dropdown-menu-end sınıfını kullanmalısınız.

Önemli Değişiklik: Bootstrap 4’te bunu yapmak için .dropdown-menu-right veya -left kullanılırdı. Ancak Bootstrap 5, Arapça gibi sağdan sola okunan dilleri (RTL) desteklemek için “left” ve “right” kelimelerini kaldırıp mantıksal özellikler olan “start” (başlangıç) ve “end” (bitiş) kelimelerini getirmiştir. Yani sağa dayamak için artık .dropdown-menu-end sınıfını kullanıyoruz.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Sağa Hizalı Menü
  </button>
  <!-- Menü açıldığında butonun sağ kenarı ile hizalanır -->
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Profil</a></li>
    <li><a class="dropdown-item" href="#">Çıkış</a></li>
  </ul>
</div>

7. Karanlık Mod (Dark Mode) Açılır Menüleri

Web sitenizin genel teması koyu ise, beyaz açılır menüler göz yorucu olabilir. Önceki Bootstrap 5 sürümlerinde (v5.2 ve öncesi) bunu yapmak için .dropdown-menu-dark sınıfı kullanılırdı. Ancak Bootstrap 5.3 sürümü ile birlikte, sisteme küresel “Karanlık Mod” desteği geldiği için bu sınıf eskimiş (deprecated) kabul edilmiştir.

Bunun yerine, artık doğrudan .dropdown veya .dropdown-menu kapsayıcısına data-bs-theme="dark" niteliğini ekliyoruz.

<div class="dropdown">
  <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Karanlık Menü
  </button>
  <!-- Bootstrap 5.3+ ile Koyu Tema Menüsü -->
  <ul class="dropdown-menu" data-bs-theme="dark">
    <li><a class="dropdown-item" href="#">Hakkımızda</a></li>
    <li><a class="dropdown-item" href="#">İletişim</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Kariyer</a></li>
  </ul>
</div>

8. Etkileşim: Otomatik Kapanma (Auto Close) Özelliği

Bootstrap 5 ile birlikte açılır menülere harika bir yeni JavaScript özelliği eklendi: data-bs-auto-close. Standart bir açılır menü, menünün dışına veya içindeki bir linke tıkladığınızda kapanır. Ancak bazen menünün içinde bir kayıt formu tutmak isteyebilirsiniz ve tıklandığında menünün hemen kapanmaması gerekir.

Bunu kontrol etmek için butona şu özellikleri verebilirsiniz:

• data-bs-auto-close="true": (Varsayılan) İçe veya dışa tıklandığında kapanır.
• data-bs-auto-close="outside": Sadece menünün dışına tıklandığında kapanır (İçeriye tıklamak kapatmaz).
• data-bs-auto-close="inside": Sadece menünün içine tıklandığında kapanır.
• data-bs-auto-close="false": Otomatik kapanmaz, kapatmak için tekrar butona basmak gerekir.

<div class="dropdown">
  <!-- Sadece menü dışına tıklandığında kapanır -->
  <button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
    Form Menüsü
  </button>
  <div class="dropdown-menu p-4" style="width: 250px;">
    <!-- Menü kapanmadan form doldurulabilir -->
    <div class="mb-3">
      <label for="email" class="form-label">E-Posta</label>
      <input type="email" class="form-control" id="email">
    </div>
    <button type="submit" class="btn btn-primary">Kayıt Ol</button>
  </div>
</div>

Özetle

Bootstrap 5 Dropdowns (Açılır Menüler), sitenizde temiz bir gezinme hiyerarşisi oluşturmanın en etkili yoludur. Arama motorları, temiz kodlanmış ve HTML liste (<ul>, <li>) yapısına uygun menüleri kolayca tarayarak site mimarinizi daha iyi anlar. Ayrıca jQuery gerektirmeyen yeni “Saf JavaScript” altyapısı, data-bs-* nitelikleri ve data-bs-theme="dark" gibi yenilikçi özellikleri ile sitenizin modern web standartlarına tam uyum sağlamasını garanti eder. Yukarıdaki kod örneklerini kopyalayarak projenize dahil edebilir ve bu interaktif dünyayı keşfetmeye anında başlayabilirsiniz!