Bootstrap Navbar, web sitelerinde gezinme menüsü oluşturmak için kullanılan güçlü bir bileşendir. Esnek, duyarlı ve özelleştirilebilir yapısıyla modern web sitelerinde sıklıkla tercih edilir. Navbar, logolar, bağlantılar, açılır menüler ve arama çubukları gibi farklı öğeleri bir araya getirerek gezinme deneyimini geliştirir.
Temel Kullanım
Navbar oluşturmak için .navbar sınıfı kullanılır. Varsayılan olarak responsive bir yapıdadır ve genişlik azaldığında bir hamburger menüsüne dönüşebilir.
Temel Örnek:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Marka</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#">Hakkında</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
</div>
</div>
</nav>
Navbar Renkleri
Navbar’ın arka plan rengini değiştirmek için bg-light, bg-dark, bg-primary gibi Bootstrap sınıfları kullanılabilir. Metin renkleri ise navbar-light veya navbar-dark ile belirlenir.
Örnek:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Marka</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Ana Sayfa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hakkında</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
</div>
</div>
</nav>
Navbar ile Dropdown Kullanımı
Navbar’da açılır menüler oluşturmak için .dropdown sınıfı kullanılır.
Örnek:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Marka</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Ana Sayfa</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Hizmetler
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Alt Menü 1</a></li>
<li><a class="dropdown-item" href="#">Alt Menü 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Alt Menü 3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
</div>
</div>
</nav>
Arama Çubuğu ile Navbar
Navbar içine bir arama çubuğu eklemek için Bootstrap form bileşenleri kullanılabilir.
Örnek:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Marka</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Ana Sayfa</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Hizmetler
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Alt Menü 1</a></li>
<li><a class="dropdown-item" href="#">Alt Menü 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Alt Menü 3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
</div>
</div>
</nav>
Responsive Navbar
Bootstrap Navbar, mobil uyumlu tasarım için geliştirilmiştir. Küçük ekranlarda otomatik olarak bir hamburger menüsüne dönüşür. Daha fazla özelleştirme için navbar-expand-* sınıfları kullanılabilir:
navbar-expand-sm: Küçük ekranlar için genişlemenavbar-expand-md: Orta ekranlar için genişlemenavbar-expand-lg: Büyük ekranlar için genişlemenavbar-expand-xl: Çok büyük ekranlar için genişleme
Sabit Navbar
Navbar’ı ekranın üstüne veya altına sabitlemek için fixed-top veya fixed-bottom sınıfları kullanılır.
Örnek:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sabit Navbar</a>
</div>
</nav>