Bootstrap Nav, Tabs ve Pills: Sekmeler Nasıl Yapılır?

Temel nav bileşeni

Bootstrap'teki tüm gezinme bileşenleri aynı temeli paylaşır: .nav sınıfı. Bu sınıf flexbox ile kuruludur, liste öğelerinin varsayılan stillerini sıfırlar, bağlantılara daha geniş tıklama alanı için iç boşluk verir ve devre dışı durum için basit bir stil içerir. Değiştirici sınıfı değiştirerek aynı HTML'i sekmeye, hapa ya da düz bağlantı satırına çevirirsiniz. Bootstrap 5.0.2 derlenmiş CSS dosyasında temel kurallar şöyledir:

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #0d6efd;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

Belgelerin özellikle uyardığı bir nokta var: temel .nav bileşeninde .active sınıfı özel bir stil üretmez. Örneklerde bu sınıfın bulunması, yalnızca tek başına bir etkisi olmadığını göstermek içindir; görsel fark .nav-tabs veya .nav-pills eklenince ortaya çıkar. Etkin durumu yardımcı teknolojilere iletmek için geçerli sayfada aria-current="page", bir küme içindeki geçerli öğede aria-current="true" kullanın.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Genel bakış</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Fiyatlar</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Yakında</a>
  </li>
</ul>

Sınıflar her şeyi taşıdığı için işaretleme esnektir. Yukarıdaki gibi <ul>, sıranın önemli olduğu durumlarda <ol> ya da doğrudan bir <nav> öğesi kullanabilirsiniz. .nav flex kapsayıcı olduğundan <nav> içine doğrudan konan .nav-link bağlantıları, liste öğeleriyle aynı biçimde dizilir; bu durumda .nav-item sarmalayıcısını yazmanız gerekmez.

Devre dışı bağlantı için .disabled sınıfı, tabindex="-1" ve aria-disabled="true" birlikte kullanılır. CSS tarafında .nav-link.disabled kuralı rengi griye çeker ve pointer-events: none ile tıklamayı engeller; klavye odağını ise tabindex engeller.

Hizalama ve dikey yerleşim

Nav'lar varsayılan olarak sola yaslıdır. Ortalamak için .justify-content-center, sağa yaslamak için .justify-content-end eklersiniz; bunlar flex yardımcı sınıflarıdır ve Bootstrap flex yazısında anlatılır. Bağlantıları alt alta dizmek için .flex-column kullanılır. Yalnızca bazı ekran genişliklerinde dikey olmasını istiyorsanız .flex-sm-column gibi responsive sürümleri seçersiniz.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Hesabım</a>
  <a class="nav-link" href="#">Siparişlerim</a>
  <a class="nav-link" href="#">Adreslerim</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Faturalar</a>
</nav>

Sekmeler ve haplar: nav-tabs ve nav-pills

Aynı HTML'e .nav-tabs eklediğinizde klasik sekme görünümü, .nav-pills eklediğinizde ise arka planı dolan yuvarlak köşeli düğmeler elde edersiniz. İki değiştiricinin farkı derlenmiş CSS'te açıkça görülür:

Sekmelerde etkin bağlantının alt kenarlığı zemin rengiyle aynıdır ve bağlantı margin-bottom: -1px ile kapsayıcının alt çizgisinin üzerine biner. Etkin sekmenin altındaki içerikle birleşik görünmesinin nedeni budur. Haplarda ise etkin bağlantı birincil renkle dolar; bu renk Sass tarafında $nav-pills-link-active-bg değişkeninden gelir.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Aylık</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Yıllık</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Kurumsal</a>
  </li>
</ul>

Tam genişlik: nav-fill ve nav-justified

Nav'ın kapsayıcının tüm genişliğini doldurmasını istiyorsanız iki seçenek var. .nav-fill, öğeleri içeriklerine oranla büyütür: tüm yatay alan dolar ama uzun metinli öğe daha geniş olur. .nav-justified ise tüm öğeleri eşit genişliğe getirir. Fark CSS'teki iki kuralda saklıdır:

.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

flex: 1 1 auto büyümeye öğenin kendi içerik genişliğinden başlar, bu yüzden uzun öğe uzun kalır. flex-basis: 0 ise başlangıç genişliğini sıfırlar ve kalan alanı herkese eşit böler. Bu davranışın arkasındaki flex mantığı CSS flexbox rehberinde anlatılıyor. <nav> tabanlı bir yapı kullanırsanız iki sınıf da doğrudan .nav-link öğelerine uygulanır.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Kargo</a>
  <a class="nav-link" href="#">Uzun başlıklı iade koşulları</a>
  <a class="nav-link" href="#">Garanti</a>
</nav>

Daha esnek, kesme noktasına göre değişen bir düzen istiyorsanız belgeler flex yardımcılarını birleştirmeyi önerir. Aşağıdaki nav en küçük ekranda alt alta durur, sm kesme noktasından itibaren yatay olur ve tüm genişliği doldurur:

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Özet</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Teknik özellikler</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Yorumlar</a>
</nav>

Erişilebilirlik: gezinme ile sekme arayüzü aynı şey değil

Nav'ları sitenin gezinme çubuğu olarak kullanıyorsanız role="navigation" rolünü listenin en mantıklı üst öğesine verin ya da tüm yapıyı bir <nav> ile sarın. Rolü <ul> öğesine vermeyin; yardımcı teknolojiler o zaman onu bir liste olarak duyuramaz.

İkinci kural daha sık çiğnenir: sadece sekme gibi görünen bir gezinme çubuğuna role="tablist", role="tab" veya role="tabpanel" verilmemelidir. Bu roller yalnızca sayfa içinde panelleri değiştiren dinamik sekme arayüzleri içindir. Başka sayfalara giden bağlantılar .nav-tabs görünümünde olsa bile bağlantıdır. Dinamik sekmelerde ise aria-current gerekmez, çünkü Bootstrap'in JavaScript'i seçili sekmeye aria-selected="true" ekleyerek durumu kendisi yönetir. ARIA rollerinin genel anlamı için ARIA rolleri ve öznitelikleri yazısına bakın.

Sekmelerde ve haplarda açılır menü

Gezinme amaçlı sekmelere ve haplara biraz ek HTML ile açılır menü ekleyebilirsiniz. Açılır menü öğesi .nav-item.dropdown olur, içindeki bağlantı .dropdown-toggle ve data-bs-toggle="dropdown" taşır. Bunun için Dropdown eklentisi gerekir; ayrıntılar Bootstrap dropdown yazısında.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Ürünler</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Kategoriler</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Bilgisayar</a></li>
      <li><a class="dropdown-item" href="#">Telefon</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Tüm kategoriler</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Kampanyalar</a>
  </li>
</ul>

Tab eklentisiyle dinamik sekmeler

Sekmeye tıklayınca sayfa yenilenmeden altındaki içeriğin değişmesi için Tab eklentisi kullanılır. Eklentiyi tek başına ya da derlenmiş bootstrap.js dosyası içinde yükleyebilirsiniz. Dinamik sekme arayüzleri, yapılarını ve durumlarını yardımcı teknolojilere aktarmak için role="tablist", role="tab", role="tabpanel" ve ek aria- öznitelikleri ister. Belgeler sekme tetikleyicileri için bağlantı yerine <button> önerir, çünkü bu öğeler başka bir sayfaya gitmez, sayfadaki içeriği değiştirir.

<ul class="nav nav-tabs mb-3" id="urunSekme" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="aciklama-tab" data-bs-toggle="tab" data-bs-target="#aciklama" type="button" role="tab" aria-controls="aciklama" aria-selected="true">Açıklama</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="ozellik-tab" data-bs-toggle="tab" data-bs-target="#ozellik" type="button" role="tab" aria-controls="ozellik" aria-selected="false">Özellikler</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="yorum-tab" data-bs-toggle="tab" data-bs-target="#yorum" type="button" role="tab" aria-controls="yorum" aria-selected="false">Yorumlar</button>
  </li>
</ul>
<div class="tab-content" id="urunSekmeIcerik">
  <div class="tab-pane fade show active" id="aciklama" role="tabpanel" aria-labelledby="aciklama-tab">Ürünün açıklaması burada.</div>
  <div class="tab-pane fade" id="ozellik" role="tabpanel" aria-labelledby="ozellik-tab">Teknik özellikler burada.</div>
  <div class="tab-pane fade" id="yorum" role="tabpanel" aria-labelledby="yorum-tab">Müşteri yorumları burada.</div>
</div>

Bu yapıda her öğenin bir görevi var. <ul> sekme listesi rolünü taşır; <li> öğeleri role="presentation" ile liste anlamından arındırılır ki ekran okuyucu sekmeleri liste maddesi olarak değil sekme olarak duyursun. Her düğmenin data-bs-target değeri bir panelin id değerini gösterir, aria-controls aynı paneli işaret eder, panel de aria-labelledby ile kendi sekmesine bağlanır. Başlangıçta seçili sekmede hem .active hem aria-selected="true" bulunur.

Panellerin görünürlüğü yalnızca CSS ile yönetilir. Bootstrap 5.0.2 derlenmiş CSS dosyasında kural şöyledir:

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

Seçicideki > işaretine dikkat edin: paneller .tab-content öğesinin doğrudan çocukları olmalıdır. Paneli araya giren bir <div> içine koyarsanız bu kurallar ona uygulanmaz ve tüm paneller aynı anda görünür. Geçiş efekti için her panele .fade eklenir; ilk görünür panelde ayrıca .show bulunmalıdır, aksi hâlde .fade:not(.show) kuralı onu saydam bırakır ve sayfa ilk açıldığında içerik boş görünür.

Eklenti hap görünümüyle de çalışır; bu durumda düğmelerde data-bs-toggle="pill" kullanılır. Haplar dikey de dizilebilir. Belgelerdeki dikey örnek, sekme listesini ve panelleri d-flex align-items-start ile yan yana koyar, listeye flex-column nav-pills me-3 ve aria-orientation="vertical" verir:

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="ayarSekme" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="profil-tab" data-bs-toggle="pill" data-bs-target="#profil" type="button" role="tab" aria-controls="profil" aria-selected="true">Profil</button>
    <button class="nav-link" id="guvenlik-tab" data-bs-toggle="pill" data-bs-target="#guvenlik" type="button" role="tab" aria-controls="guvenlik" aria-selected="false">Güvenlik</button>
    <button class="nav-link" id="bildirim-tab" data-bs-toggle="pill" data-bs-target="#bildirim" type="button" role="tab" aria-controls="bildirim" aria-selected="false">Bildirimler</button>
  </div>
  <div class="tab-content" id="ayarSekmeIcerik">
    <div class="tab-pane fade show active" id="profil" role="tabpanel" aria-labelledby="profil-tab">Profil ayarları</div>
    <div class="tab-pane fade" id="guvenlik" role="tabpanel" aria-labelledby="guvenlik-tab">Şifre ve iki adımlı doğrulama</div>
    <div class="tab-pane fade" id="bildirim" role="tabpanel" aria-labelledby="bildirim-tab">E-posta bildirimleri</div>
  </div>
</div>

Bu örnekte sekmeler bir liste içinde değil, doğrudan div.nav içinde düğme olarak duruyor; bu yüzden role="presentation" gereken bir <li> yok. Tab eklentisi aynı işi list group bileşeninde data-bs-toggle="list" ile de yapar; o kullanım Bootstrap list group yazısında anlatılıyor.

JavaScript ile sekme açmak

Veri öznitelikleri çoğu durumda yeterlidir, ancak bir sekmeyi koddan seçmek de mümkündür. Belgeler her sekmenin ayrı ayrı etkinleştirilmesi gerektiğini belirtir. Aşağıdaki parça belgelerdeki örnektir: bağlantı tabanlı bir sekme listesindeki her tetikleyici için bir bootstrap.Tab örneği oluşturur ve tıklamada varsayılan bağlantı davranışını durdurup sekmeyi gösterir.

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

Kurucu bir sekme öğesi alır; bu öğenin hedef paneli gösteren bir data-bs-target değeri ya da bağlantıysa bir href değeri olmalıdır. Örnek üzerinde kullanılabilecek yöntemler şunlardır:

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl)
tab.show()

Bootstrap'in tüm API yöntemleri gibi show da asenkrondur: geçiş başladığı anda çağırana döner, panel gerçekten görünmeden önce. Belgeler ayrıca geçiş sürerken aynı bileşene yapılan yöntem çağrılarının yok sayıldığını belirtir. Panel göründükten sonra bir şey yapmanız gerekiyorsa show çağrısının hemen ardından değil, shown.bs.tab olayında çalışın. Örnek oluşturma, seçenekler ve asenkron yöntemler Bootstrap JavaScript API yazısında genel olarak anlatılıyor; JavaScript dilinin kendisi için JavaScript öğrenme rehberine bakabilirsiniz.

Sekme olayları ve sıraları

Yeni bir sekme gösterilirken dört olay belirli bir sırayla tetiklenir. Belgelerdeki sıra şöyledir:

• hide.bs.tab: şu an etkin olan sekmede.
• show.bs.tab: gösterilecek sekmede.
• hidden.bs.tab: bir önceki etkin sekmede, yani hide.bs.tab ile aynı öğede.
• shown.bs.tab: yeni etkin olan sekmede, yani show.bs.tab ile aynı öğede.

Daha önce etkin bir sekme yoksa hide.bs.tab ve hidden.bs.tab hiç tetiklenmez. Her olayda event.target olayın tetiklendiği sekmeyi, event.relatedTarget ise karşı tarafı verir: gösterilme olaylarında önceki sekmeyi, gizlenme olaylarında yeni sekmeyi. v5.0.2 kaynağında tab.js, show.bs.tab ya da hide.bs.tab olayında preventDefault() çağrılırsa geçişi hiç başlatmaz; bu, örneğin kaydedilmemiş bir form varken sekme değiştirmeyi engellemek için kullanılabilir.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // yeni etkin sekme
  event.relatedTarget // önceki etkin sekme
})

Sass değişkenleri

Nav, sekme ve hap görünümleri scss/_variables.scss içindeki değişkenlerle ayarlanır. Bağlantı iç boşlukları için $nav-link-padding-y (.5rem) ve $nav-link-padding-x (1rem), devre dışı renk için $nav-link-disabled-color ($gray-600) kullanılır. Sekmelerde $nav-tabs-border-color, $nav-tabs-border-radius, $nav-tabs-link-active-color ve $nav-tabs-link-active-bg; haplarda $nav-pills-border-radius, $nav-pills-link-active-color ve $nav-pills-link-active-bg bulunur. 5.0'da $nav-link-font-size, $nav-link-font-weight gibi yeni değişkenler varsayılan olarak null gelir; değer verdiğinizde CSS'e eklenir. Değişkenleri ezme yöntemi Bootstrap Sass yazısında anlatılıyor.

Sık yapılan hatalar

• Panel yok, yalnızca görünüm var. .nav-tabs sınıfı tek başına içerik değiştirmez; yalnızca görünümdür. Panel değişimi için data-bs-toggle, data-bs-target ve .tab-content yapısı gerekir.
• İlk panel boş görünüyor. .fade kullanılan yapıda ilk panelde .show ve .active birlikte bulunmalıdır.
• Tüm paneller aynı anda görünüyor. Paneller .tab-content öğesinin doğrudan çocuğu değil ya da .tab-pane sınıfı eksik.
• Kimlik uyuşmazlığı. data-bs-target="#ozellik" ile panelin id="ozellik" değeri aynı olmalıdır; Türkçe karakterli veya boşluklu kimlikler seçici yazımını zorlaştırır, sade ASCII kimlikler tercih edin.
• v4 yazımı. 5.0'da data-toggle="tab" çalışmaz, doğrusu data-bs-toggle="tab"; ayrıntı için v4'ten v5'e geçiş yazısına bakın.
• Gezinme çubuğuna tablist rolü. Başka sayfalara giden sekme görünümlü bağlantılara role="tab" vermek, ekran okuyucuya yanlış bilgi verir.
• Ok tuşlarıyla gezinme beklemek. v5.0.2 tab.js kaynağında sekmeler arasında ok tuşlarıyla dolaşmayı sağlayan bir klavye işleyicisi yoktur; sekmeler Tab tuşuyla odaklanıp Enter veya Boşluk ile seçilir, çünkü düğmedirler. Ek klavye davranışı istiyorsanız kendiniz yazmanız gerekir.

Sık Sorulan Sorular

nav-tabs ile nav-pills arasında işlev farkı var mı?

Hayır, ikisi de yalnızca görünüm değiştiricisidir. Tab eklentisi ikisiyle de aynı şekilde çalışır; sekme görünümünde data-bs-toggle="tab", hap görünümünde data-bs-toggle="pill" yazılır.

Sekmeler için a mı button mu kullanmalıyım?

Dinamik sekmelerde belgeler <button> önerir, çünkü bu tetikleyiciler sayfa değiştirmez, içerik değiştirir. Başka sayfaya giden gezinme bağlantılarında ise <a href> kullanın.

Sayfa açıldığında ikinci sekmenin seçili olmasını nasıl sağlarım?

En basit yol, HTML'de .active sınıfını ve aria-selected="true" değerini ikinci sekmeye, .show ile .active sınıflarını ilgili panele vermektir. Koddan yapmak isterseniz sekme öğesi için bootstrap.Tab.getOrCreateInstance(oge).show() çağırabilirsiniz.

Sekme değiştiğinde içerik yüklemek mümkün mü?

Evet, show.bs.tab veya shown.bs.tab olayını dinleyip event.target ile hangi sekmenin seçildiğini öğrenebilir, içeriği o anda kendi kodunuzla doldurabilirsiniz. Bootstrap'in kendisi içerik yükleme yapmaz; yalnızca sınıfları ve ARIA durumunu değiştirir.

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 dropdown açılır menü · Bootstrap list group · Bootstrap JavaScript API ve olaylar · Bootstrap erişilebilirlik · ARIA rolleri ve öznitelikleri