Bootstrap Navbar: Responsive Menü Nasıl Yapılır?

Navbar nasıl çalışır?

Belgeler başlamadan önce bilinmesi gereken birkaç kuralı sıralar. Bunları bir kez kavradığınızda navbar'daki sınıfların neredeyse tamamı kendiliğinden anlam kazanır:

• Dış öğe .navbar sınıfını taşır. Responsive davranış için .navbar-expand{-sm|-md|-lg|-xl|-xxl} sınıflarından biri, renkler için bir renk şeması sınıfı eklenir.
• Navbar ve içeriği varsayılan olarak akışkandır, yani bulunduğu alanın tüm genişliğini kullanır. İçeriğin ne kadar genişleyeceğini içteki container türüyle belirlersiniz.
• Navbar içindeki boşluk ve hizalama işleri için ayrı bileşen sınıfları yoktur; spacing ve flex yardımcı sınıfları kullanılır.
• Daralan menünün açılıp kapanması Collapse JavaScript eklentisine bağlıdır. Bootstrap'in JavaScript dosyası sayfada yoksa düğme hiçbir şey yapmaz.
• Erişilebilirlik için navbar'ı bir <nav> öğesiyle kurun. <div> gibi genel bir öğe kullanıyorsanız role="navigation" ekleyin ki yardımcı teknolojiler onu bir gezinme bölgesi olarak tanısın. Geçerli sayfanın bağlantısına aria-current="page", bir küme içindeki geçerli öğeye aria-current="true" verin.

v4'ten gelenler için bir not: Bootstrap 5'te navbar'ın içinde bir container bulunması zorunlu hâle geldi. Sürüm geçişi belgesi bunu kırıcı değişiklikler arasında sayar; taşıdığınız eski bir navbar'da iç container yoksa ekleyin. Diğer değişiklikler için Bootstrap 4'ten 5'e geçiş rehberine bakabilirsiniz.

Bootstrap 5.0.2 derlenmiş CSS dosyasında .navbar sınıfı şöyle tanımlıdır:

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

Yani navbar bir flex kapsayıcıdır: satır sarabilir, öğelerini dikeyde ortalar ve doğrudan alt öğelerini justify-content: space-between ile iki uca dağıtır. Marka solda, form sağda durur çünkü bu kural öyle yerleştirir. Flex özelliklerinin kendisi CSS flexbox rehberinde, Bootstrap'in flex yardımcı sınıfları ise Bootstrap flex yazısında anlatılıyor.

Temel navbar örneği

Aşağıdaki örnek belgelerdeki tam kapsamlı örneğin kısaltılmış ve Türkçeleştirilmiş hâlidir: açık renkli, lg eşiğinde açılan, içinde marka, iki bağlantı, bir açılır menü, devre dışı bir bağlantı ve arama formu bulunan bir navbar.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Firma Adı</a>
    <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ç veya kapat">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="anaMenu">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Ana sayfa</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Hizmetler</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="kurumsalMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Kurumsal</a>
          <ul class="dropdown-menu" aria-labelledby="kurumsalMenu">
            <li><a class="dropdown-item" href="#">Hakkımızda</a></li>
            <li><a class="dropdown-item" href="#">Ekibimiz</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">İletişim</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Yakında</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Ara" aria-label="Ara">
        <button class="btn btn-outline-success" type="submit">Ara</button>
      </form>
    </div>
  </div>
</nav>

Düğmedeki data-bs-target="#anaMenu" değeri, açılıp kapanacak .collapse öğesinin id değeriyle birebir aynı olmalıdır; eşleşme bozulursa düğme hiçbir şeyi açmaz. aria-controls aynı kimliği gösterir, aria-expanded="false" ise menünün başlangıçta kapalı olduğunu bildirir. Collapse eklentisi menü açılıp kapandıkça bu değeri kendisi günceller. aria-label yalnızca simge içeren düğmeye okunabilir bir ad verir.

.navbar-nav üzerindeki me-auto sağ dış boşluğu otomatik yapar ve formu sağ uca iter. mb-2 mb-lg-0 ise menü dar ekranda alt alta açıldığında listenin altına boşluk bırakır, lg ve üstünde bu boşluğu sıfırlar. Bu sınıfların tamamı spacing yardımcılarıdır ve margin ve padding sınıfları yazısında ayrıntılı anlatılır. Navbar'ın desteklediği alt parçalar şunlardır:

navbar-expand: menü hangi genişlikte açılır?

Açılma eşiği tek bir sınıfla seçilir. .navbar-expand-lg, ekran genişliği lg kesme noktasına, yani 992 piksele ulaştığında menüyü yatay açar; daha dar ekranda içerik düğmenin arkasında kalır. Bootstrap mobile-first çalıştığı için eşik bir alt sınırdır: sınıf o genişlikten itibaren yukarı doğru geçerlidir. Kesme noktalarının tamamı ve bu mantık Bootstrap breakpoint yazısında anlatılıyor.

Hiç daralmayan bir navbar için yalnızca .navbar-expand, her zaman daralan bir navbar için ise hiçbir expand sınıfı kullanmazsınız. Bootstrap 5.0.2 derlenmiş CSS dosyasında .navbar-expand-lg şöyle tanımlıdır:

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

Bu kural, eşiğin altında ve üstünde neler değiştiğini açıkça gösterir. Eşiğin altında .navbar-nav sütun yönündedir, bağlantıların yatay iç boşluğu sıfırdır ve açılır menüler position: static olduğu için açıldıklarında altlarındaki içeriği aşağı iter. Eşiğe gelince liste satır yönüne döner, açılır menüler position: absolute ile içeriğin üstünde açılır, .navbar-collapse görünür olmaya zorlanır ve düğme gizlenir.

Bu sınıfları kimse elle yazmaz. scss/_navbar.scss içindeki bir döngü $grid-breakpoints haritasını gezer ve her kesme noktası için bir sonrakini bularak media-breakpoint-up mixin'iyle sarılmış bir sınıf üretir. Son kesme noktasından sonra bir kademe kalmadığı için o adımda medya sorgusu olmayan düz .navbar-expand sınıfı oluşur. Kesme noktası haritasını Sass ile değiştirirseniz navbar sınıfları da buna göre yeniden üretilir.

Marka alanı: metin, başlık ve logo

.navbar-brand çoğu öğeye uygulanabilir, ancak belgeler en iyi sonucu bir bağlantı öğesinin verdiğini, diğer öğelerin ek yardımcı sınıf veya özel stil isteyebileceğini belirtir. Derlenmiş CSS'te bu sınıf yazı boyutunu 1.25rem yapar, sağa 1rem dış boşluk bırakır ve white-space: nowrap ile marka adının satır kırmasını engeller.

Markayı bir başlık gibi göstermek isterseniz bağlantı yerine <span class="navbar-brand mb-0 h1"> kullanabilirsiniz. Metin yerine bir görsel koymak için <img> öğesini doğrudan markanın içine yerleştirirsiniz. Görsel ve metni birlikte kullanırken belgeler görsele d-inline-block ve align-text-top eklemenizi önerir; böylece logo metinle aynı satırda, metnin üst hizasında durur.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Firma Adı
    </a>
  </div>
</nav>

Bu örnekte görselin alt değeri boş bırakıldı, çünkü hemen yanındaki metin bağlantıya zaten bir ad veriyor. Markada yalnızca logo varsa alt içine firma adını yazmanız gerekir; aksi hâlde bağlantı ekran okuyucuda adsız kalır.

Bağlantılar, etkin ve devre dışı öğeler

Navbar içindeki bağlantılar temel .nav bileşeninin üzerine kuruludur ve kendi değiştirici sınıflarını kullanır. Belgelerin vurguladığı bir ayrıntı, navbar içindeki gezinme listesinin olabildiğince fazla yatay alanı kaplamak üzere büyümesidir; bu, içeriğin düzgün hizalanmasını sağlar. Temel .nav sınıfları ve sekmeler Bootstrap nav, tabs ve pills yazısında anlatılıyor.

Geçerli sayfayı göstermek için ilgili .nav-link öğesine .active sınıfı ve aria-current="page" eklersiniz. Sınıf görsel vurguyu, öznitelik ise yardımcı teknolojilere verilen bilgiyi sağlar; biri diğerinin yerini tutmaz. Devre dışı bağlantılar için belgeler .disabled sınıfıyla birlikte tabindex="-1" ve aria-disabled="true" kullanır. CSS tarafında .nav-link.disabled kuralı pointer-events: none verir, yani fareyle tıklanamaz; klavyeyle odaklanmayı ise tabindex="-1" engeller.

Sınıflar her şeyi taşıdığı için liste yapısı zorunlu değildir. <ul> ve <li> yerine bir <div class="navbar-nav"> içine doğrudan bağlantılar koyabilirsiniz:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Firma Adı</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#listesizMenu" aria-controls="listesizMenu" aria-expanded="false" aria-label="Menüyü aç veya kapat">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="listesizMenu">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Ana sayfa</a>
        <a class="nav-link" href="#">Özellikler</a>
        <a class="nav-link" href="#">Fiyatlar</a>
      </div>
    </div>
  </div>
</nav>

Açılır menü kullanacaksanız liste yapısına dönmeniz gerekir: açılır menüler konumlanmak için bir sarmalayıcı öğeye ihtiyaç duyar, bu yüzden .nav-item ile .nav-link ayrı ve iç içe öğeler olmalıdır. Belgelere göre navbar içindeki açılır menüler Popper ile konumlandırılmaz, çünkü orada dinamik konumlandırmaya gerek yoktur. Kaynak kodda da bu görülür: js/src/dropdown.js menü bir navbar içindeyse menüye data-bs-popper="none" yazar ve Popper örneği oluşturmaz. Navbar dışındaki bir açılır menüde Popper yüklü değilse aynı dosya "Bootstrap's dropdowns require Popper" iletisiyle bir hata fırlatır. Açılır menünün tüm seçenekleri Bootstrap dropdown yazısında yer alıyor.

Navbar içinde form ve metin

Navbar'a arama kutusu gibi form denetimleri koymak için formu d-flex ile yatay hâle getirip giriş alanına me-2 ile küçük bir boşluk vermek yeterlidir. Navbar'ın doğrudan alt öğeleri flex düzeninde olduğundan ve varsayılan dağıtım space-between olduğundan, marka ile form kendiliğinden iki uca yerleşir. Farklı bir dağıtım isterseniz flex yardımcılarıyla bu davranışı değiştirirsiniz.

Navbar'ın tamamı ya da büyük kısmı bir formdan oluşuyorsa belgeler <form> öğesini doğrudan container olarak kullanmayı önerir; böylece fazladan bir sarmalayıcı yazmazsınız. Input group da navbar içinde çalışır. Farklı boyutlardaki düğmeleri yan yana koyarken justify-content-start gibi bir hizalama sınıfı, öğelerin sola toplanmasını sağlar.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <div class="input-group w-auto me-2">
      <span class="input-group-text" id="kullaniciEki">@</span>
      <input type="text" class="form-control" placeholder="Kullanıcı adı" aria-label="Kullanıcı adı" aria-describedby="kullaniciEki">
    </div>
    <button class="btn btn-outline-success" type="button">Ara</button>
  </form>
</nav>

Navbar içine düz metin koymak için .navbar-text kullanılır. Bu sınıf metnin dikey hizasını ve yatay aralığını ayarlar; derlenmiş CSS'te üst ve alt iç boşluğu 0.5rem olarak tanımlıdır, böylece metin bağlantılarla aynı yükseklikte görünür. Form denetimlerinin kendisi Bootstrap form-control yazısında, input group ise input group ve floating label yazısında anlatılıyor.

Renk şemaları: navbar-light ve navbar-dark

Renk şeması sınıfları navbar'ın arka planını boyamaz; yalnızca marka, bağlantı, metin ve düğme renklerini ayarlar. Açık arka planlar için .navbar-light, koyu arka planlar için .navbar-dark seçer, arka planı ise bg-dark, bg-primary gibi bir yardımcı sınıfla ya da kendi CSS'inizle verirsiniz. Belgelerdeki üçüncü örnek navbar-light ile satır içi bir background-color stilini birleştirir.

Bootstrap 5.0.2 derlenmiş CSS dosyasındaki değerler iki şemanın farkını net gösterir:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Firma Adı</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#koyuMenu" aria-controls="koyuMenu" aria-expanded="false" aria-label="Menüyü aç veya kapat">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="koyuMenu">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Ana sayfa</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Ara" aria-label="Ara">
        <button class="btn btn-outline-light" type="submit">Ara</button>
      </form>
    </div>
  </div>
</nav>

Koyu navbar'da arama düğmesi için btn-outline-light seçildiğine dikkat edin; koyu zemin üzerinde açık renkli bir çerçeve daha okunaklıdır. Toggler simgesi şemaya göre otomatik değişir, çünkü simge her şema için ayrı bir SVG arka planla tanımlanmıştır. Arka plan sınıfları Bootstrap renk sınıfları yazısında anlatılıyor. Bu renkleri kökten değiştirmek isterseniz $navbar-dark-color ve $navbar-light-color gibi Sass değişkenlerine bakın.

Container ve sayfadaki yerleşim

Navbar'ı sayfada ortalamak isterseniz onu bir .container içine alabilirsiniz; ancak bu durumda bile navbar'ın içinde ayrı bir container gerekir. Diğer yol, container'ı navbar'ın içine koymaktır: arka plan tam genişlikte kalır, içerik ortalanır. .container-md gibi responsive container'lar içeriğin hangi kesme noktasından itibaren sınırlanacağını belirler. Container türleri container ve container-fluid yazısında karşılaştırılıyor.

Navbar'ı sayfanın üstüne veya altına sabitlemek için konum yardımcıları kullanılır. Bootstrap 5.0.2 derlenmiş CSS dosyasında bu üç sınıf şöyle tanımlıdır:

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.fixed-top ve .fixed-bottom navbar'ı belge akışından çıkarır. Bu yüzden sayfa içeriği navbar'ın altına girer; belgeler bunu önlemek için <body> öğesine üst iç boşluk gibi özel bir CSS gerekebileceğini söyler. Resmî "Navbar fixed" örnek şablonu da kendi CSS dosyasında body için padding-top: 4.5rem tanımlar. .sticky-top ise sayfa kaydırılırken navbar'ı tepeye ulaşana kadar akışta tutar, sonra orada sabitler; belgeler position: sticky özelliğinin her tarayıcıda tam desteklenmediğini hatırlatır.

Değerlerdeki fark bilinçlidir: sabit öğeler 1030, yapışkan öğeler 1020 katmanındadır ve ikisi de 1000 katmanındaki açılır menülerin üstünde kalır. Bu katman sırası ve konum sınıflarının tamamı Bootstrap position ve sticky-top yazısında anlatılıyor.

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Yapışkan menü</a>
  </div>
</nav>

Uzun menüler için kaydırma

Dar ekranda açılan menü çok uzunsa, ekranın tamamını kaplamasını önlemek için .navbar-nav öğesine .navbar-nav-scroll eklersiniz. Bu sınıf yalnızca menü daraltılmış hâldeyken dikey kaydırma sağlar; navbar genişleyip yatay açıldığında içerik normal navbar gibi görünür. Bootstrap 5.0.2 derlenmiş CSS dosyasında kural şöyledir:

.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}

Varsayılan sınır görünür alan yüksekliğinin yüzde 75'idir. Bunu değiştirmek için öğeye style="--bs-scroll-height: 100px;" gibi yerel bir CSS değişkeni verirsiniz. Belge metni bu değişkenin adını bir yerde farklı yazsa da hem belgedeki örnek hem derlenmiş CSS --bs-scroll-height adını kullanır; çalışan ad budur. CSS değişkenlerinin nasıl işlediği CSS değişkenleri yazısında anlatılıyor.

Belgelerin uyardığı bir yan etki var: overflow-y: auto verildiğinde overflow-x de fiilen auto gibi davranır ve yatayda taşan içerik kırpılabilir. Kaydırmalı menü içinde geniş öğeler kullanırken bunu göz önünde tutun.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Katalog</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#uzunMenu" aria-controls="uzunMenu" aria-expanded="false" aria-label="Menüyü aç veya kapat">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="uzunMenu">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item"><a class="nav-link" href="#">Bilgisayar</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Telefon</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Aksesuar</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Kampanyalar</a></li>
      </ul>
    </div>
  </div>
</nav>

Toggler konumu ve navbar dışındaki içerik

Açma düğmesi varsayılan olarak sola hizalıdır. Düğme kaynak kodda .navbar-brand gibi bir kardeş öğeden sonra gelirse otomatik olarak sağ uca yerleşir. Sırayı tersine çevirirseniz, yani önce düğmeyi sonra markayı yazarsanız, düğme solda marka sağda görünür. Markanın küçük ekranda hiç görünmemesini istiyorsanız onu .navbar-collapse içine taşırsınız; marka da menüyle birlikte gizlenir.

Collapse eklentisi id ile data-bs-target eşleşmesine dayandığı için açılan içeriğin navbar'ın içinde olması da gerekmez. Aşağıdaki örnekte navbar'daki düğme, yapısal olarak navbar'ın dışında ve ondan önce duran bir alanı açar:

<div class="collapse" id="ustPanel">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Açılan içerik</h5>
    <span class="text-muted">Bu alan navbar'daki düğmeyle açılır.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#ustPanel" aria-controls="ustPanel" aria-expanded="false" aria-label="Paneli aç veya kapat">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Bu düzende belgeler, içerik açıldığında odağı JavaScript ile programatik olarak o alana taşımanızı önerir. Aksi hâlde klavye kullananlar ve ekran okuyucu kullananlar yeni açılan içeriği bulmakta zorlanır; özellikle bu örnekte olduğu gibi içerik düğmeden önce geliyorsa. Düğmede aria-controls bulunması da önerilir, ancak belgeler yardımcı teknolojilerin bu özniteliği desteklemesinin henüz düzensiz olduğunu not eder. ARIA özniteliklerinin genel anlamı için ARIA rolleri ve öznitelikleri yazısına bakın. Collapse eklentisinin seçenekleri, yöntemleri ve olayları accordion ve collapse yazısında ayrıntılı anlatılıyor.

Sass ile navbar ayarları

Navbar'ın ölçüleri ve renkleri scss/_variables.scss içindeki değişkenlerden gelir. Sık değiştirilenler şunlardır: $navbar-padding-y (varsayılan $spacer * .5), açık navbar'da bağlantıların yatay iç boşluğunu belirleyen $navbar-nav-link-padding-x (.5rem), marka boyutu için $navbar-brand-font-size ($font-size-lg), markanın sağ boşluğu için $navbar-brand-margin-end (1rem) ve düğmenin iç boşlukları için $navbar-toggler-padding-y ile $navbar-toggler-padding-x. Renk tarafında $navbar-dark-color, $navbar-dark-hover-color, $navbar-light-color gibi değişkenler yukarıdaki tablodaki değerleri üretir.

Bu değişkenler !default ile tanımlandığı için, Bootstrap'i içe aktarmadan önce kendi değerinizi yazarsanız sizinki geçerli olur. Aşağıdaki parça resmî Sass belgesindeki tüm Bootstrap'i içe aktarma düzenini izler; derlenmediği için çıktısını göstermiyoruz:

// custom.scss
// Varsayılan değişken değerlerini Bootstrap'i içe aktarmadan önce ezin
$navbar-nav-link-padding-x: 1rem;
$navbar-brand-margin-end: 1.5rem;

@import "../node_modules/bootstrap/scss/bootstrap";

Sass ile özelleştirmenin dosya yapısı, içe aktarma sırası ve diğer seçenekler Bootstrap Sass ile özelleştirme yazısında anlatılıyor.

Sık yapılan hatalar

• JavaScript dosyası eklenmemiş. Navbar'ın CSS'i yüklüdür ama düğme menüyü açmaz. Collapse eklentisi olmadan daralan menü çalışmaz; navbar'da açılır menü de varsa Popper'ı içeren bootstrap.bundle.min.js dosyası en zahmetsiz seçenektir. Kurulum için CDN kurulumu yazısına bakın.
• v4 öznitelikleri kullanılmış. Bootstrap 5'te veri öznitelikleri data-bs- önekini taşır. Eski data-toggle="collapse" ve data-target yazımı 5.0'da hiçbir şey yapmaz.
• Kimlikler eşleşmiyor. data-bs-target değerinin başına # konmalı ve .collapse öğesinin id değeriyle harfi harfine aynı olmalıdır. Aynı sayfada iki navbar varsa her birinin kimliği farklı olmalıdır.
• İç container unutulmuş. Bootstrap 5 navbar'ın içinde bir container bekler; olmadığında boşluklar ve hizalama beklenenden farklı olur.
• Viewport meta etiketi yok. Mobil tarayıcı sayfayı geniş bir masaüstü ekranı gibi çizerse navbar hiç daralmaz. Starter template'teki viewport etiketini eklemeyi unutmayın; kavram için mobil uyumluluk yazısına bakın.
• Sabit navbar içeriği örtüyor. .fixed-top akıştan çıktığı için sayfanın ilk satırları navbar'ın altında kalır. body öğesine navbar yüksekliği kadar üst boşluk verin ya da .sticky-top kullanın.
• Açılır menünün üzerine gelince açılmasını beklemek. Bootstrap açılır menüleri bilinçli bir tasarım kararıyla tıklamayla açılır, fareyle üzerine gelmekle değil.
• Açılır menüde nav-item sarmalayıcısı yok. .dropdown-toggle bağlantısını doğrudan .navbar-nav içine koyarsanız menünün konumlanacağı bir sarmalayıcı kalmaz; li.nav-item.dropdown içine alın.

Bootstrap genelindeki diğer sorunlar ve çözümleri için Bootstrap çalışmıyor: sık hatalar yazısına bakabilirsiniz.

Sık Sorulan Sorular

navbar-expand-lg ile navbar-expand-md arasındaki fark nedir?

Yalnızca menünün yatay açıldığı eşiktir. -md 768 pikselden, -lg 992 pikselden itibaren menüyü yatay açar. Bağlantı sayınız azsa daha küçük bir eşik, çoksa daha büyük bir eşik seçmek menünün tek satıra sığmasını kolaylaştırır.

Navbar hiç daralmasın istiyorum, ne yapmalıyım?

Navbar'a kesme noktası soneki olmayan .navbar-expand sınıfını verin. Bu durumda düğme hiçbir genişlikte görünmez ve içerik her zaman yatay durur. Tersine, menünün her ekranda düğme arkasında kalmasını istiyorsanız hiçbir expand sınıfı eklemeyin.

Menü bağlantısına tıklayınca dar ekranda menü kapanmıyor, neden?

Collapse eklentisi menüyü düğmeye basıldığında açıp kapatır; bağlantıya tıklamak menüyü otomatik kapatmaz. Bağlantı başka bir sayfaya gidiyorsa yeni sayfa zaten kapalı menüyle açılır. Aynı sayfa içinde bir bölüme kaydıran bağlantılarda menüyü kapatmak istiyorsanız Collapse eklentisinin hide yöntemini kendi kodunuzla çağırmanız gerekir; yöntemler collapse yazısında listeleniyor.

Navbar'daki açılır menü için Popper şart mı?

Belgelere göre navbar içindeki açılır menüler Popper ile konumlandırılmaz ve kaynak kod bu durumda Popper'a başvurmaz. Yine de sayfanızda navbar dışında açılır menü, tooltip veya popover varsa Popper gerekir. En basit yol Popper'ı içeren bundle dosyasını kullanmaktır.

Navbar'ı ortalamak için ne kullanmalıyım?

Arka planın tam genişlikte kalıp içeriğin ortalanmasını istiyorsanız navbar'ın içindeki .container-fluid yerine .container kullanın. Navbar'ın kendisinin de kutu gibi ortada durmasını istiyorsanız onu dışarıdan bir .container ile sarın ve içte yine bir container bırakın.

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 dropdown açılır menü · Bootstrap offcanvas yan menü · Bootstrap nav tabs ve pills · Bootstrap accordion ve collapse · Bootstrap position ve sticky-top · JavaScript öğrenme rehberi