Bootstrap Navbar (Gezinme Çubuğu)

Web tasarımı eğitim serimizde, bir web sitesinin adeta “kalbi” ve “haritası” olan gezinme menülerine, yani Bootstrap Navbar bileşenine geldik. Ziyaretçilerinizin sitenizde kaybolmadan dolaşabilmesi, aradıkları içeriği kolayca bulabilmesi ve arama motorlarının (Google gibi) sitenizin hiyerarşisini doğru anlayabilmesi için mükemmel bir gezinme menüsüne sahip olmanız şarttır.

Sıfırdan mobil uyumlu (responsive) bir menü kodlamak; açılır-kapanır (hamburger) butonları ayarlamak, CSS Flexbox ile hizalamalar yapmak ve JavaScript ile tıklama olaylarını yönetmek oldukça zahmetli bir iştir. Bootstrap 5, Navbar bileşeni sayesinde hiçbir ekstra CSS veya JavaScript yazmanıza gerek kalmadan, profesyonel ve her ekrana kusursuz uyum sağlayan menüleri dakikalar içinde oluşturmanıza imkan tanır.

Bu rehberde, Bootstrap ile Navbar yapısının temellerini, bileşenlerini, Bootstrap 5 ile gelen çok kritik mimari yenilikleri ve modern (Offcanvas) mobil menülerin nasıl yapılacağını bol örneklerle, sıfırdan öğreneceğiz.

1. Bootstrap Navbar’ın Temel Anatomisi ve Sınıfları

Bir Bootstrap gezinme çubuğu, birbiriyle uyum içinde çalışan birkaç temel HTML sınıfının (class) bir araya gelmesiyle oluşur. Arama motoru optimizasyonu (SEO) ve erişilebilirlik (accessibility) kuralları gereği, menümüzü her zaman <nav> etiketi ile sarmalamalıyız.

İşte bilmeniz gereken en temel Navbar sınıfları:

• .navbar: Tüm menüyü saran ana kapsayıcı sınıftır. Gerekli temel iç boşlukları (padding) ve Flexbox altyapısını kurar.
• .navbar-expand-{breakpoint}: Menünüzün hangi ekran boyutunda “hamburger (mobil) menüye” dönüşeceğini belirler. Örneğin .navbar-expand-lg kullanırsanız, menü 992px’in (Large ekranlar) altında katlanarak mobil görünüme geçer.
• .navbar-brand: Sitenizin logosunu veya adını (markanızı) yerleştirdiğiniz alandır.
• .navbar-toggler: Mobil görünüme geçildiğinde ortaya çıkan “Hamburger” ikonlu butondur. Menüyü açıp kapatmaya yarar.
• .collapse.navbar-collapse: Mobil ekranlarda gizlenen, butona tıklandığında aşağı doğru açılan asıl menü linklerini saran kapsayıcıdır.

Önemli Bir Bootstrap 5 Kuralı: Bootstrap 5 ile birlikte Navbar mimarisinde devasa bir değişiklik yapılmıştır. Menü içindeki elemanların sağdan ve soldan hizalanmasını yönetebilmek için, <nav> etiketinin hemen içine mutlaka bir .container veya .container-fluid kapsayıcısı eklemek zorundasınız.

2. İlk Navbar Örneğimiz (Temel Kullanım)

Yukarıdaki kavramları birleştirerek, içinde logo, linkler ve mobil açılır buton barındıran temel bir menü oluşturalım:

<nav class="navbar navbar-expand-lg bg-light">
  <!-- İçerikleri hizalamak için zorunlu Container -->
  <div class="container-fluid">

    <!-- Logo veya Site Adı -->
    <a class="navbar-brand" href="#">Benim Sitem</a>

    <!-- Mobil Görünüm (Hamburger) Butonu -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#anaMenu" aria-controls="anaMenu" aria-expanded="false" aria-label="Menüyü Aç/Kapat">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Masaüstünde yan yana duran, mobilde gizlenen linkler -->
    <div class="collapse navbar-collapse" id="anaMenu">
      <ul class="navbar-nav">
        <li class="nav-item">
          <!-- Aktif sayfa linki -->
          <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>
      </ul>
    </div>

  </div>
</nav>

JavaScript ve Tetikleyicilerdeki Değişim: Bootstrap 4’te hamburger menüyü tetiklemek için data-toggle kullanılırdı. Bootstrap 5, diğer JavaScript kütüphaneleriyle çakışmayı önlemek için tüm veri niteliklerine (data attributes) bs- ön eki getirmiştir. Bu yüzden yukarıdaki butonda data-bs-toggle="collapse" ve data-bs-target="#anaMenu" kullandık. Ayrıca Bootstrap 5’in jQuery bağımlılığını tamamen terk edip “Saf (Vanilla) JavaScript” kullanması sayesinde bu açılır menüler artık tarayıcıda çok daha hızlı çalışmaktadır.

Aktif (Active) Sınıfı Değişimi: Eski sürümlerde kullanıcının bulunduğu sayfayı belli eden .active sınıfı <li> (nav-item) etiketine yazılırdı. Bootstrap 5 ile birlikte .active sınıfı artık doğrudan <a> (nav-link) etiketinin kendisine yazılmak zorundadır.

3. Navbar Hizalamaları (Flexbox Kullanımı)

Bootstrap 5, gücünü CSS Flexbox’tan aldığı için menü öğelerini sağa, sola veya ortaya hizalamak son derece kolaydır. Varsayılan olarak .navbar-nav listesi logonun hemen yanına (sola) hizalanır.

Eğer linklerin ekranın en sağına gitmesini istiyorsanız, Bootstrap’in “Auto Margin” (Otomatik Boşluk) yardımcı sınıflarını kullanmanız gerekir.

• .ms-auto (Margin Start Auto): Menü listesini sağa iter (RTL dil desteği nedeniyle eski ml-auto yerine ms-auto gelmiştir).
• .me-auto (Margin End Auto): Menü listesini sola iter (Varsayılan davranışa benzer).
• .mx-auto (Margin X Auto): Menüyü tam ortaya merkeze hizalar.

Sağa Hizalanmış Menü Örneği:

<!-- Sadece ul etiketine ms-auto ekledik -->
<ul class="navbar-nav ms-auto">
  <li class="nav-item"><a class="nav-link" href="#">İletişim</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Giriş Yap</a></li>
</ul>

4. Renkler ve Karanlık Mod (Dark Mode) Tasarımı

Web sitenizin genel tasarım diline uygun bir Navbar rengi seçmek SEO ve Marka bütünlüğü için önemlidir.

Eskiden koyu renkli bir Navbar yapmak istediğimizde, metinlerin beyaz renge dönmesi için .navbar-dark sınıfını kullanıyorduk. Ancak Bootstrap 5.3 sürümü ile birlikte Karanlık Mod (Dark Mode) mimarisi tamamen değişti ve .navbar-dark sınıfı kullanımdan kaldırılarak (deprecated) yerine data-bs-theme="dark" niteliği getirildi.

Bunun haricinde arka planı renklendirmek için standart .bg-primary, .bg-dark veya .bg-body-tertiary gibi arka plan (background) yardımcı sınıflarını kullanabilirsiniz.

Koyu (Dark) Tema Örneği (Bootstrap 5.3+ Standartlarına Göre):

<!-- Hem arka planı siyah yaptık (bg-dark) hem de içindeki yazıların beyaz/açık renk olması için (data-bs-theme="dark") özelliğini ekledik -->
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  <div class="container">
    <a class="navbar-brand" href="#">Karanlık Tema</a>
    <!-- ... Diğer menü elemanları ... -->
  </div>
</nav>

5. Navbar Konumlandırma (Positioning) Seçenekleri

Ziyaretçi sayfayı aşağıya kaydırdığında menünüzün nasıl davranacağını seçebilirsiniz. Uzun sayfaya sahip bloglar veya e-ticaret siteleri için menünün sürekli ekranda kalması harika bir kullanıcı deneyimi (UX) sunar. Bootstrap bunun için hazır sınıflar sunar:

1. .fixed-top: Menüyü ekranın en üstüne sabitler. Sayfayı ne kadar kaydırırsanız kaydırın menü her zaman tepede kalır. (Not: Bu sınıf menüyü sayfa akışından çıkarır, bu nedenle sayfanızın <body> kısmına CSS ile padding-top vermeniz gerekebilir).
2. .fixed-bottom: Menüyü ekranın en altına sabitler. Genellikle mobil uygulama tarzı web sitelerinde kullanılır.
3. .sticky-top: Modern web tasarımının en popüler seçeneğidir. Menü normal yerinde durur, ancak kullanıcı aşağı kaydırdıkça ekranın tepesine çarptığı an oraya yapışır (sticky) ve aşağıya inmez. CSS’in position: sticky; özelliğini kullanır ve ekstra padding ayarlaması gerektirmez.

Kullanımı:

<nav class="navbar sticky-top navbar-expand-lg bg-light">
  <!-- İçerik -->
</nav>

6. Devrim Niteliğinde Yenilik: Offcanvas (Yandan Açılan) Navbar

Bootstrap 5.1 ve 5.2 sürümleriyle birlikte Navbar bileşenine muazzam bir özellik eklendi. Artık mobilde hamburger butona tıkladığınızda, menünün klasik bir şekilde yukarıdan aşağıya (accordion/collapse gibi) sayfayı iterek açılması yerine, ekranın sağından veya solundan modern bir şekilde kayarak gelmesini (drawer) sağlayabiliyoruz. Bu özelliğe Offcanvas denir.

Bu tasarımı elde etmek için klasik .collapse.navbar-collapse sınıflarını tamamen siliyor ve yerine .offcanvas sınıflarını entegre ediyoruz.

Modern Offcanvas Menü Örneği:

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Modern Offcanvas Sitem</a>

    <!-- Buton Hedefi Artık bir Collapse değil, bir Offcanvas (#offcanvasMenu) -->
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu" aria-controls="offcanvasMenu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Gizli Menü Kapsayıcısı (Ekranın sağından açılması için offcanvas-end kullanıldı) -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel">

      <!-- Offcanvas'ın sadece mobilde görünen özel Başlık ve Çarpı (Kapat) Butonu Bölümü -->
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasMenuLabel">Menü</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Kapat"></button>
      </div>

      <!-- Asıl Menü Linkleri Gövdesi -->
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" href="#">Ana Sayfa</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Hizmetlerimiz</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</nav>

Bu entegrasyon sayesinde akıllı telefonlarda (mobile-first) yerel mobil uygulamalardakine (native apps) çok benzer, kusursuz ve SEO açısından tamamen erişilebilir bir gezinme deneyimi yaratmış olursunuz.

Özetle

Bootstrap 5 Navbar bileşeni; ister logonuzu merkeze aldığınız statik bir kurumsal site, isterseniz mobil ziyaretçileriniz için ekran dışından kayarak gelen dinamik bir menü tasarlıyor olun, size tüm bu olanakları sıfır CSS ve JavaScript bilgisiyle sunar. Özellikle yeni data-bs-theme="dark" temalandırması ve jQuery’den arındırılmış hızlı altyapısı sayesinde web siteniz arama motorları testlerinde (Core Web Vitals) yüksek hız skorları alacaktır.

Öğrendiğiniz konteyner zorunluluğunu, .ms-auto ile flex hizalamalarını ve .sticky-top özelliklerini kendi projenize kopyalayarak hemen ilk Navbar yapınızı inşa etmeye başlayın!