Bootstrap'te açılır menü yapmak için tetikleyiciyi (bir düğme ya da bağlantı) ve menüyü .dropdown sınıflı bir sarmalayıcının içine koyarsınız. Tetikleyici .dropdown-toggle sınıfı ile data-bs-toggle="dropdown" özniteliğini, menü .dropdown-menu sınıfını, menüdeki her seçenek .dropdown-item sınıfını taşır. Menünün konumunu Popper kitaplığı hesapladığı için sayfada Popper'ı içeren bootstrap.bundle.min.js dosyası ya da Bootstrap'ten önce yüklenmiş ayrı bir Popper dosyası bulunmalıdır.
Bu yazı Bootstrap 5.0 belgelerine ve v5.0.2 kaynak koduna dayanır. Tek ve bölünmüş düğmeleri, yönleri, menü içeriğini, hizalamayı, offset ve autoClose gibi seçenekleri, JavaScript yöntemlerini ve olayları örneklerle anlatıyoruz. Sonraki 5.x sürümlerinde açılır menüye yeni özellikler eklenmiş olabilir; kullandığınız sürümün belgelerine getbootstrap.com üzerinden bakın.
Açılır menü nasıl çalışır?
Bootstrap'in açılır menüleri, bağlantı listeleri ve benzeri içerikleri göstermek için açılıp kapanan bağlamsal katmanlardır ve Dropdown JavaScript eklentisiyle etkileşimli hâle gelir. Belgeler bilinçli bir tasarım kararını özellikle not eder: menüler fareyle üzerine gelinince değil, tıklanınca açılır.
Eklenti, menüyü göstermek ve gizlemek için .dropdown-menu öğesindeki .show sınıfını değiştirir. Bootstrap 5.0.2 derlenmiş CSS dosyasında temel kurallar şöyledir (kısaltıldı):
.dropup,
.dropend,
.dropdown,
.dropstart {
position: relative;
}
.dropdown-menu {
position: absolute;
z-index: 1000;
display: none;
min-width: 10rem;
padding: 0.5rem 0;
/* (kısaltıldı) */
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.dropdown-menu.show {
display: block;
}Bu kurallar iki şeyi açıklar. Menü position: absolute olduğu için kendisine en yakın konumlandırılmış ataya göre yerleşir; sarmalayıcı .dropdown bu yüzden position: relative taşır. Belgeler sarmalayıcı olarak .dropdown ya da position: relative bildiren başka bir öğe kullanmanızı ister. İkincisi, menü .show sınıfı gelene kadar display: none ile gizlidir; JavaScript yüklenmezse menü hiç görünmez.
data-bs-toggle="dropdown" özniteliğinin bir görevi daha var: eklenti, sayfadaki açık menüleri uygulama düzeyinde kapatırken bu özniteliği kullanır. Bu yüzden belgeler, menüyü JavaScript ile başlatsanız bile tetikleyicide bu özniteliğin her zaman bulunması gerektiğini vurgular. Konumlandırmayı Popper yapar; ancak menü bir navbar içindeyse Popper kullanılmaz, çünkü orada dinamik konuma gerek yoktur. Navbar içindeki kullanım Bootstrap navbar yazısında anlatılıyor.
Menü içeriği: başlık, ayırıcı, metin ve form
Açılır menü yalnızca bağlantı listesi değildir. Belgeler şu parçaları tanımlar:
| Parça | İşaretleme | Ne için |
|---|---|---|
| Başlık | h6.dropdown-header | Bir grup eylemi etiketlemek |
| Ayırıcı | hr.dropdown-divider | İlgili öğe gruplarını ayırmak |
| Metin öğesi | span.dropdown-item-text | Tıklanamayan bilgi satırı |
| Etkin öğe | dropdown-item active ve aria-current | Seçili veya geçerli öğeyi vurgulamak |
| Devre dışı öğe | dropdown-item disabled, tabindex=-1, aria-disabled | Kullanılamayan seçeneği göstermek |
| Serbest metin | dropdown-menu p-4 text-muted | Paragraf içeren bilgi kutusu |
| Form | dropdown-menu içinde form ya da form.dropdown-menu | Giriş veya filtre formu |
Etkin öğe için .active sınıfı yalnızca görsel vurgu sağlar; durumu yardımcı teknolojilere iletmek için geçerli sayfada aria-current="page", küme içindeki geçerli öğede aria-current="true" kullanın. Serbest metin koyduğunuzda menünün genişliğini sınırlamak için ek bir boyut stili gerekebilir; belgelerdeki örnek max-width: 200px kullanır.
Bir formu menünün içine koyabilir ya da formun kendisini menü yapabilirsiniz; iki durumda da form çevresindeki boşluğu spacing yardımcılarıyla verirsiniz. Aşağıdaki örnekte form menünün içinde px-4 py-3 boşlukla duruyor ve altında bir ayırıcıyla ek bağlantılar var:
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="girisMenu" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Giriş yap
</button>
<div class="dropdown-menu" aria-labelledby="girisMenu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="girisEposta" class="form-label">E-posta</label>
<input type="email" class="form-control" id="girisEposta" placeholder="ornek@alanadi.com">
</div>
<div class="mb-3">
<label for="girisSifre" class="form-label">Şifre</label>
<input type="password" class="form-control" id="girisSifre">
</div>
<button type="submit" class="btn btn-primary">Giriş</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Şifremi unuttum</a>
</div>
</div>Bu örnekte tetikleyiciye data-bs-auto-close="outside" eklendi. Varsayılan davranışta menünün içine tıklamak da menüyü kapatır; formlu menüde bu istenmez. outside değeri menüyü yalnızca dışarı tıklanınca kapatır. Seçeneğin tüm değerleri aşağıda.
Seçenekler: offset, reference, autoClose ve diğerleri
Seçenekler veri öznitelikleriyle ya da JavaScript ile verilir. Veri özniteliğinde seçenek adı data-bs- önekinin sonuna eklenir ve camelCase yazım kebab-case yazıma çevrilir: autoClose seçeneği data-bs-auto-close olur. Varsayılan değerler v5.0.2 dropdown.js dosyasındaki Default nesnesiyle belgelerdeki tablonun aynısıdır:
| Seçenek | Tür | Varsayılan | Görevi |
|---|---|---|---|
| boundary | string veya öğe | 'clippingParents' | Popper preventOverflow için taşma sınırı; öğe yalnızca JavaScript ile verilebilir |
| reference | string, öğe veya nesne | 'toggle' | Menünün hizalandığı referans: 'toggle', 'parent', bir öğe ya da getBoundingClientRect sağlayan nesne |
| display | string | 'dynamic' | Popper ile dinamik konum; 'static' ile kapatılır |
| offset | dizi, string veya fonksiyon | [0, 2] | Menünün hedefe göre kaydırılması; veri özniteliğinde virgüllü string |
| autoClose | boolean veya string | true | Menünün hangi tıklamalarla kapanacağı |
| popperConfig | null, nesne veya fonksiyon | null | Bootstrap varsayılan Popper yapılandırmasını değiştirmek |
offset iki sayılık bir dizidir; Popper terminolojisinde ilki eksen boyunca kayma (skidding), ikincisi hedeften uzaklıktır (distance). Veri özniteliğinde data-bs-offset="10,20" şeklinde yazılır. Fonksiyon verirseniz, fonksiyon ilk argüman olarak Popper yerleşimini, referans ve menü dikdörtgenlerini içeren bir nesne, ikinci argüman olarak tetikleyici öğeyi alır ve iki sayılık bir dizi döndürmelidir. reference seçeneğinin parent değeri, bölünmüş düğmede menünün ok düğmesine değil tüm düğme grubuna göre hizalanmasını sağlar.
autoClose seçeneğinin dört değeri vardır:
true(varsayılan): menünün içine ya da dışına tıklamak menüyü kapatır.false: menü yalnızca tetikleyiciye yeniden tıklanarak ya dahideveyatoggleyöntemi çağrılarak kapanır; belgelere göre bu durumdaEsctuşu da menüyü kapatmaz.'inside': menü yalnızca içine tıklanınca kapanır.'outside': menü yalnızca dışına tıklanınca kapanır.
Sürüm geçişi belgesi, v4'teki flip seçeneğinin kaldırıldığını ve çevirme davranışını kapatmak için Popper'ın kendi fallbackPlacements seçeneğine boş bir dizi verilmesi gerektiğini not eder; bu da popperConfig üzerinden yapılır. popperConfig bir fonksiyon olduğunda Bootstrap'in varsayılan Popper yapılandırmasını argüman olarak alır ve yeni bir yapılandırma nesnesi döndürmelidir:
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})JavaScript ile başlatma ve yöntemler
Veri öznitelikli tetikleyiciler sayfa yüklendiğinde kendiliğinden çalışır; ayrıca bir başlatma kodu gerekmez. Menüleri koddan başlatmak isterseniz belgelerdeki şu parçayı kullanırsınız:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})| Yöntem | Ne yapar |
|---|---|
| toggle | Menüyü açıksa kapatır, kapalıysa açar |
| show | Menüyü gösterir |
| hide | Menüyü gizler |
| update | Menünün konumunu yeniden hesaplar |
| dispose | Öğedeki menü örneğini yok eder ve saklanan veriyi kaldırır |
| getInstance | Statik; öğeye bağlı örneği döndürür |
| getOrCreateInstance | Statik; örnek yoksa yenisini oluşturup döndürür |
update yöntemi, menü açıkken sayfa düzeni değiştiğinde (örneğin tetikleyicinin yanına içerik eklendiğinde) konumu tazelemek için kullanışlıdır. Örnek oluşturma, seçenek verme ve olay dinleme kalıpları tüm eklentilerde ortaktır ve Bootstrap JavaScript API yazısında toplu olarak anlatılıyor; dilin kendisi için JavaScript öğrenme rehberine bakabilirsiniz.
Olaylar
Açılır menünün dört olayı vardır ve hepsi tetikleyici öğede tetiklenip yukarı doğru kabarcıklanır (bubble). Bu yüzden dinleyiciyi .dropdown-menu öğesinin üst öğesine de ekleyebilirsiniz. Sürüm geçişi belgesi bunu kırıcı bir değişiklik olarak listeler: v5'te olaylar artık tetikleyici düğmede tetiklenir.
| Olay | Ne zaman |
|---|---|
| show.bs.dropdown | show yöntemi çağrıldığı anda |
| shown.bs.dropdown | Menü görünür olup CSS geçişleri bittiğinde |
| hide.bs.dropdown | hide yöntemi çağrıldığı anda |
| hidden.bs.dropdown | Menü gizlenip CSS geçişleri bittiğinde |
hide.bs.dropdown ve hidden.bs.dropdown olaylarında, kapanışa bir tıklama yol açtıysa clickEvent adlı bir özellik bulunur ve o tıklamanın olay nesnesini taşır. Menünün neden kapandığını anlamak için bu özelliğe bakabilirsiniz.
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})Klavye ve erişilebilirlik
WAI-ARIA standardında gerçek bir role="menu" bileşeni vardır, ancak bu rol eylem tetikleyen uygulama menülerine özgüdür ve içinde yalnızca menü öğeleri, onay kutulu ve radyo düğmeli menü öğeleri, radyo grupları ve alt menüler bulunabilir. Bootstrap'in açılır menüleri ise genel amaçlıdır; içine arama kutusu veya giriş formu koyabilirsiniz. Bu yüzden Bootstrap gerçek ARIA menüleri için gereken role ve aria- özniteliklerini beklemez ve kendiliğinden eklemez; gerekiyorsa bu daha özel öznitelikleri siz yazarsınız.
Klavye tarafında Bootstrap standart menü etkileşimlerinin çoğunu kendisi sağlar: ok tuşlarıyla .dropdown-item öğeleri arasında dolaşabilir, menüyü Esc ile kapatabilirsiniz. v5.0.2 dropdown.js kaynağına göre odak henüz bir menü öğesinde değilken (örneğin tetikleyicideyken) aşağı ok ilk öğeye, yukarı ok son öğeye gider; öğeler arasında ise listenin başında ve sonunda durur, başa sarmaz. Dokunmatik cihazlarda menü açılırken <body> öğesinin doğrudan çocuklarına boş mouseover dinleyicileri eklenir; belgeler bunun iOS'taki bir olay yetkilendirme tuhaflığını aşmak için yapıldığını ve menü kapanınca kaldırıldığını açıklar. ARIA kavramları için ARIA rolleri ve öznitelikleri yazısına bakın.
Sass değişkenleri
Menünün görünümü scss/_variables.scss içindeki değişkenlerden gelir: en küçük genişlik $dropdown-min-width (10rem), dikey iç boşluk $dropdown-padding-y (.5rem), 5.0 ile eklenen yatay iç boşluk $dropdown-padding-x (0), tetikleyiciyle menü arası boşluk $dropdown-spacer (.125rem), öğe iç boşlukları $dropdown-item-padding-y ve $dropdown-item-padding-x, etkin öğe rengi $dropdown-link-active-bg. Koyu menünün ayrı $dropdown-dark-* değişkenleri vardır. Ok işareti $caret-width (.3em) gibi değişkenlerle ve scss/mixins/_caret.scss içindeki mixin'lerle üretilir. Değişkenleri ezme yöntemi için Bootstrap Sass yazısına bakın.
Sık yapılan hatalar
- Popper yok. Navbar dışındaki bir menü açılmaz ve konsolda bir hata belirir. v5.0.2 kaynağında bu durum için "Bootstrap's dropdowns require Popper" iletili bir denetim vardır; derlenmiş dosyada ileti farklı görünebilir, ama sonuç aynıdır.
bootstrap.min.jsyerinebootstrap.bundle.min.jskullanın ya da Popper'ı Bootstrap'ten önce yükleyin. Kurulum seçenekleri için CDN kurulumu yazısına bakın. - v4 özniteliği.
data-toggle="dropdown"5.0'da çalışmaz; doğrusudata-bs-toggle="dropdown". - Sarmalayıcı eksik. Tetikleyici ve menü
.dropdown,.btn-groupya daposition: relativetaşıyan bir öğenin içinde değilse menü beklenmedik bir yerde açılabilir. - Responsive hizalama çalışmıyor.
.dropdown-menu-lg-endgibi sınıflar Popper'ın dinamik konumuyla birlikte etkisiz kalır; tetikleyiciyedata-bs-display="static"eklemeyi unutmayın. - Form içeren menü tıklayınca kapanıyor. Varsayılan
autoClose: trueiçeri tıklamada da kapatır;data-bs-auto-close="outside"kullanın. - Üzerine gelince açılmasını beklemek. Bootstrap menüleri tıklamayla açılır; fareyle açılma isteniyorsa bu Bootstrap'in sağladığı bir davranış değildir.
- Eksik ARIA ile role="menu". Rolü ekleyip gerekli diğer öznitelikleri ve klavye desenini tamamlamamak, ekran okuyucuya yanlış bir yapı bildirir. Genel amaçlı bir bağlantı listesinde rol eklemeyin.
Diğer genel sorunlar için Bootstrap çalışmıyor: sık hatalar yazısına bakabilirsiniz.
Sık Sorulan Sorular
Açılır menü neden açılmıyor?
En sık üç neden vardır: JavaScript dosyasının hiç yüklenmemesi, Popper'ın eksik olması ya da v4'ten kalan data-toggle yazımı. Menüyü açmaya çalışırken tarayıcının geliştirici konsolunda bir hata beliriyorsa önce Popper'ın yüklü olduğunu doğrulayın; hiç hata yoksa öznitelik adını ve Bootstrap dosyasının yüklenip yüklenmediğini kontrol edin.
Menünün her zaman sağa hizalı açılmasını nasıl sağlarım?
.dropdown-menu öğesine .dropdown-menu-end ekleyin. Hizalamanın yalnızca belirli bir genişlikten sonra değişmesini istiyorsanız responsive sınıflarla birlikte data-bs-display="static" kullanın.
Menü öğesine tıklayınca menü kapanmasın istiyorum.
Tetikleyiciye data-bs-auto-close="outside" ekleyin; menü yalnızca dışarıya tıklandığında kapanır. Menünün yalnızca sizin kodunuzla kapanmasını istiyorsanız false değerini verip hide yöntemini kendiniz çağırın.
Menüyü tetikleyiciden biraz uzağa açabilir miyim?
Evet, offset seçeneğini kullanın. Örneğin data-bs-offset="0,10" menüyü varsayılandan daha uzak açar; ilk sayı eksen boyunca kaymayı, ikincisi uzaklığı belirler. Varsayılan değer [0, 2] şeklindedir.
Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.
İlgili içerikler: Bootstrap öğrenme rehberi · Bootstrap navbar menü yapımı · Bootstrap buton ve button group · Bootstrap nav tabs ve pills · Bootstrap tooltip ve popover · Bootstrap JavaScript API ve olaylar · JavaScript öğrenme rehberi