Bootstrap Navs, web sitelerinde içerikleri düzenlemek ve gezinme çubukları oluşturmak için kullanılır. Esnek ve duyarlı bir yapıya sahip olan bu bileşen, yatay, dikey ve sekmeli görünümler gibi çeşitli düzenlemeleri destekler.
Temel Kullanım
Nav elemanları oluşturmak için .nav sınıfı kullanılır. Her bir navigasyon bağlantısı, li etiketi içinde tanımlanır ve .nav-item ile işaretlenir. Bağlantılar ise .nav-link sınıfıyla stillendirilir.
Yatay Nav Örneği:
<ul class="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>
Dikey Nav Kullanımı
Dikey bir nav oluşturmak için .flex-column sınıfı eklenir.
Örnek:
<ul class="nav flex-column">
<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>
Sekmeli (Tabs) Nav
Sekmeli gezinme oluşturmak için .nav-tabs sınıfı kullanılır.
Örnek:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Sekme 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sekme 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sekme 3</a>
</li>
</ul>
Pill Nav (Yuvarlatılmış Kenarlı)
Yuvarlatılmış kenarlı bir navigasyon stili oluşturmak için .nav-pills sınıfı kullanılır.
Örnek:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Pill 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pill 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pill 3</a>
</li>
</ul>
Justify (Hizalama)
Nav elemanlarını yatayda hizalamak için .nav-justified veya .justify-content-center, .justify-content-end gibi sınıflar kullanılabilir.
Örnek:
<ul class="nav nav-pills justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Orta Hizalı 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Orta Hizalı 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Orta Hizalı 3</a>
</li>
</ul>
Dropdown Destekli Nav
Navigasyon elemanlarına açılır menü eklemek için .dropdown sınıfı kullanılır.
Örnek:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Sekme 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Sekme 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Alt Seçenek 1</a></li>
<li><a class="dropdown-item" href="#">Alt Seçenek 2</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sekme 3</a>
</li>
</ul>
Disable (Pasif) Elemanlar
Navigasyon öğelerini pasif hale getirmek için .disabled sınıfı kullanılır.
Örnek:
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Aktif Eleman</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Pasif Eleman</a>
</li>
</ul>
Responsive Navs
Bootstrap Navs, mobil uyumlu tasarım için duyarlı yapılar sunar. Örneğin, dar ekranlarda menülerin daha kullanışlı olması için navigasyon elemanları menü çubuğuna yerleştirilebilir.