Bootstrap Navbar bileşeninin ikinci örneği olarak, daha karmaşık bir yapı oluşturalım. Bu örnekte, kullanıcıların daha fazla içeriğe erişebilmesi için açılır menü (dropdown) öğeleri ekleyeceğiz. Ayrıca, arama çubuğu ve düğmeler gibi ek bileşenler de kullanacağız. Bu tür bir navbar, genellikle daha fazla sayfa veya alt içerik bağlantıları sunmak için kullanılır.
Gelişmiş Bootstrap Navbar Özellikleri
- Dropdown Menüsü: Alt bağlantıları gruplamak için dropdown menüleri ekleyebilirsiniz.
- Arama Çubuğu: Kullanıcılara sitenizdeki içerikleri hızlıca arama imkanı sunar.
- Düğmeler: Önemli eylemleri vurgulamak için düğme ekleyebilirsiniz.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak dropdown menüsü ve arama çubuğu içeren bir navbar örneği verilmiştir.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<title>Gelişmiş Bootstrap Navbar Örneği</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Anasayfa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hakkında</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="#">Hizmet 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Hizmet 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Hizmet 3</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">Diğer Hizmetler</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Ara" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Ara</button>
</form>
<button class="btn btn-primary ms-2">Kayıt Ol</button>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Açıklama
-
Navbar Yapısı:
-
navbar-expand-lg: Navbar, büyük ekranlarda genişleyecek şekilde tasarlanmıştır. -
bg-light: Açık bir arka plan rengi kullanılır.
-
-
Dropdown Menüsü:
-
<li class="nav-item dropdown">: Dropdown menüsü içeren bir liste öğesidir. -
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">: Dropdown menüsünü açmak için kullanılan bağlantıdır.data-bs-toggleözelliği, tıklandığında dropdown'ın açılmasını sağlar. -
<ul class="dropdown-menu">: Dropdown menüsü içeriklerini kapsayan liste. Her bir öğe,dropdown-itemsınıfı ile belirtilmiştir.
-
-
Arama Çubuğu:
-
<form class="d-flex">: Duyarlı bir arama çubuğu içerir.d-flexsınıfı, form elemanlarını yatay olarak hizalar. -
<input class="form-control">: Arama kutusunu tanımlar. -
<button class="btn btn-outline-success">: Arama butonunu tanımlar.
-
-
Kayıt Ol Düğmesi:
-
<button class="btn btn-primary ms-2">: Navbar’ın sağ tarafında yer alan bir düğme.
-
Önemli Notlar
- Bootstrap'ın JavaScript bileşenleri, dropdown menüsü ve diğer etkileşimli özellikler için gereklidir.
- Navbar, mobil cihazlarda kullanıcı deneyimini artırmak için otomatik olarak uyum sağlar.
Bu tür bir Bootstrap Navbar, daha karmaşık bir içerik yapısı sunarak kullanıcıların site içinde daha etkili bir şekilde gezinmesine olanak tanır. Dropdown menüleri ve arama çubuğu gibi özellikler, sitenizin daha etkileşimli ve kullanıcı dostu olmasına katkı sağlar.