Web siteniz için hazırladığımız özgün ve SEO uyumlu içerik serimize, kullanıcı deneyiminin (UX) kalbini oluşturan Bootstrap Navs (Gezinme Menüleri) bileşeni ile devam ediyoruz. Bir web sitesine girdiğinizde aradığınız içeriği bulmanızı sağlayan alt menüler, sekmeler ve sayfa içi gezinme alanları, ziyaretçinin sitede kalma süresini doğrudan etkiler. Arama motorları (Google vb.), kullanıcıların sitenizde kolayca gezinebilmesine büyük önem verir.
Bootstrap 5, sıfırdan karmaşık CSS ve Flexbox kodları yazmanıza gerek kalmadan, sadece birkaç basit HTML sınıfı (class) kullanarak her ekrana uyumlu (responsive), şık ve erişilebilir gezinme menüleri oluşturmanızı sağlar. Bu rehberde, Bootstrap ile “Nav” (Menü) yapısının temellerini, görsel varyasyonlarını (sekmeler ve hap tasarımlar) ve Bootstrap 5 ile gelen yepyeni özellikleri bol örnekle öğreneceğiz.
1. Bootstrap Nav (Menü) Nedir ve Temel Yapısı Nasıldır?
Bootstrap “Nav” bileşeni, sayfanızda menüler, alt gezinme çubukları veya sekmeli içerikler (tabs) oluşturmak için kullanılan temel bir Flexbox altyapısıdır. Navigasyon (Navbar) bileşeninin aksine, daha basit ve esnek bir yapıya sahiptir.
Temel bir menü oluşturmak için standart HTML liste etiketlerini (<ul> ve <li>) kullanırız. Sistemin çalışması için gereken temel sınıflar şunlardır:
.nav:<ul>etiketine verilir ve Flexbox tabanlı ana menü kapsayıcısını oluşturur..nav-item: Her bir liste elemanına (<li>) verilir..nav-link: Tıklanabilir bağlantılara (<a>veya<button>) verilir. Bu sınıf, linkin üzerine gelindiğindeki (hover) renk değişimlerini ve tıklama alanının (padding) boşluklarını ayarlar.
Örnek Temel Menü:
<ul class="nav">
<li class="nav-item">
<!-- Bootstrap 5'te aktif linki belirtmek için .active sınıfı doğrudan .nav-link üzerine yazılır -->
<a class="nav-link active" aria-current="page" href="#">Ana Sayfa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hakkımızda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hizmetler</a>
</li>
<li class="nav-item">
<!-- .disabled sınıfı ile tıklanamaz bir link oluşturabilirsiniz -->
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pasif Link</a>
</li>
</ul>
Önemli Bir Değişiklik: Bootstrap 4 kullananların sıkça yaptığı bir hata, aktif sayfayı belirtmek için kullanılan .active sınıfını .nav-item (yani <li>) üzerine yazmaktır. Bootstrap 5 sürümü ile birlikte bu mimari değişmiş olup, .active sınıfı artık doğrudan .nav-link etiketinin üzerine uygulanmak zorundadır.
2. Menüleri Hizalamak (Alignment) ve Yönlendirmek
Bootstrap’in .nav bileşeni gücünü “Flexbox” teknolojisinden aldığı için, menü elemanlarınızı sağa, sola veya ortaya hizalamak sadece tek bir yardımcı sınıf eklemek kadar kolaydır.
Varsayılan olarak menüler sola hizalıdır.
- Menüyü ortalamak için
<ul>etiketine:.justify-content-center - Menüyü sağa hizalamak için
<ul>etiketine:.justify-content-end - Menüyü yan yana değil de alt alta (dikey) sıralamak için:
.flex-columnsınıflarını kullanırız.
Örnek Hizalama Kullanımı:
<!-- Sayfanın sağına yaslanmış menü -->
<ul class="nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="#">Profil</a></li>
<li class="nav-item"><a class="nav-link" href="#">Ayarlar</a></li>
</ul>
<!-- Dikey (Alt alta) sıralanmış kenar menüsü -->
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Kategori 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Kategori 2</a></li>
</ul>
3. Görsel Varyasyonlar: Sekmeler (Tabs) ve Haplar (Pills)
Basit metin linkleri her zaman yeterli olmayabilir. İçeriklerinizi bir dosya klasörü gibi sekmelere ayırmak veya onlara buton benzeri bir görünüm kazandırmak için Bootstrap harika varyasyonlar sunar.
Sekme Görünümü (Tabs): Menünüze bir tarayıcı sekmesi veya dosya sekmesi görünümü vermek için .nav sınıfının yanına .nav-tabs sınıfını eklemeniz yeterlidir. Özellikle sayfa içinde kategori değiştirirken çok şık durur.
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#">Aktif Sekme</a></li>
<li class="nav-item"><a class="nav-link" href="#">Diğer Sekme</a></li>
</ul>
Hap Görünümü (Pills): Linklerinizin altı çizgili veya klasör gibi değil de, yuvarlak köşeli birer arka plan rengine (buton gibi) sahip olmasını isterseniz .nav-pills sınıfını kullanmalısınız. Aktif (seçili) olan eleman, temanızın birincil rengiyle (primary/mavi) dolarak dikkat çeker.
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">Aktif Hap</a></li>
<li class="nav-item"><a class="nav-link" href="#">Diğer Hap</a></li>
</ul>
YENİ: Altı Çizgili Menüler (Underline): Bootstrap 5.3 sürümü ile birlikte web tasarım trendlerine uyum sağlamak amacıyla .nav-underline adlı yepyeni ve çok şık bir varyasyon sisteme dahil edilmiştir. Bu sınıfı kullandığınızda, aktif olan menü elemanının altında kalın ve zarif bir çizgi belirir.
<ul class="nav nav-underline">
<li class="nav-item"><a class="nav-link active" href="#">Altı Çizgili Aktif</a></li>
<li class="nav-item"><a class="nav-link" href="#">Standart Link</a></li>
</ul>
4. Genişliği Dolduran (Fill ve Justified) Menüler
Özellikle mobil cihazlarda (akıllı telefonlarda) menü linklerinin ekranın tüm genişliğine yayılması tıklanabilirliği artırır ve SEO için önemli olan “mobil kullanılabilirlik” skorunu yükseltir.
.nav-fill: Menü elemanları bulundukları kutunun tüm genişliğini doldurur. Ancak içindeki metnin uzunluğuna göre her bir elemanın genişliği farklı olabilir (Uzun metinli buton daha geniş, kısa metinli olan daha dar olur)..nav-justified: Menü elemanları bulundukları kutuyu tamamen eşit genişlikte doldurur. İçindeki metin kısa da olsa, uzun da olsa tüm sekmelerin boyutu milimetrik olarak aynıdır.
<ul class="nav nav-pills nav-justified">
<li class="nav-item"><a class="nav-link active" href="#">Eşit Buton 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Eşit Buton 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Eşit Buton 3</a></li>
</ul>
5. JavaScript ile Dinamik Sekmeler (Togglable Tabs) Oluşturmak
Menülerin en güçlü olduğu alanlardan biri, sayfa yenilenmeden içeriğin değiştirilebilmesidir. Örneğin, bir ürün sayfasında “Açıklama”, “Teknik Özellikler” ve “Yorumlar” bölümlerini sekmeler halinde sunabilirsiniz.
Bootstrap 5, ağır jQuery kütüphanesini sistemden tamamen çıkararak Saf (Vanilla) JavaScript’e geçiş yapmıştır. Bu sayede siteniz çok daha hızlı çalışır. Sekmeleri dinamik (tıklanabilir ve içerik değiştiren) hale getirmek için hiçbir ekstra JS kodu yazmanıza gerek yoktur, sadece HTML verilerini (Data Attributes) kullanırız.
Nasıl Yapılır?
- Tıklanacak linklere (veya butonlara)
data-bs-toggle="tab"niteliğini ekleyin. - Açılmasını istediğiniz içeriğin ID’sini
data-bs-target="#id_adi"ile belirtin. - İçeriklerin görüneceği alanı
.tab-contentkapsayıcısı içine alın ve her bir içeriğe.tab-panesınıfı verin.
Tam Çalışan Dinamik Sekme Örneği:
<!-- Sekme Menüleri -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab">Açıklama</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">Yorumlar</button>
</li>
</ul>
<!-- Sekme İçerikleri -->
<div class="tab-content mt-3" id="myTabContent">
<!-- Aktif ve Görünür İçerik (show ve active) -->
<div class="tab-pane fade show active" id="home" role="tabpanel">
<p>Bu alan "Açıklama" sekmesine tıklandığında görünür. Sayfa ilk açıldığında aktif olan kısımdır.</p>
</div>
<!-- Gizli İçerik -->
<div class="tab-pane fade" id="profile" role="tabpanel">
<p>Bu alan ise kullanıcı "Yorumlar" sekmesine tıkladığında geçiş efekti (fade) ile ekranda belirir.</p>
</div>
</div>
(Yukarıdaki örnekte yer alan role="tablist", role="tab" gibi etiketler, ekran okuyucu kullanan engelli bireyler için erişilebilirliği (accessibility) sağlayan çok kritik SEO ve UX özellikleridir).
Özetle
Bootstrap 5 Navs (Menüler ve Sekmeler) bileşeni; kullanıcıların sitenizdeki sayfalarda veya aynı sayfa içindeki farklı içerik bloklarında kaybolmadan gezinmesini sağlayan muazzam bir yapı taşıdır. Yeni gelen .nav-underline estetiği, klavye ile gezinmede devreye giren özel odak (focus-visible) stilleri ve jQuery’den bağımsız hızlı JavaScript altyapısı sayesinde modern web standartlarını projenize anında taşırsınız.
Yukarıdaki .nav-tabs, .nav-pills veya .flex-column gibi pratik sınıfları kendi projelerinizde birleştirerek, ziyaretçilerinize yüksek kaliteli bir gezinme deneyimi sunmaya hemen başlayabilirsiniz!
