...

Membuat Navigasi dengan Bootstrap 4 Nav

Bootstrap 4 Nav

Untuk membuat menu horisontal sederhana, kita dapat menggunakan class .nav dengan menempatkan class .nav tersebut pada elemen <ul> , dan class .nav-item untuk tiap elemen <li> serta class .nav-link untuk elemen a hyperlink, sebagai berikut :

<ul class="nav">
   <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
   <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
   <li class="nav-item"><a class="nav-link" title="link3" href="#">Link 3</a></li>
   <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

Secara default alignment untuk nav rapat kiri, seperti tampak pada tampilan browser dibawah ini.

Jika kita ingin menempatkan nav alignment kanan maka perlu menambahkan class css .justify-content-end pada elemen <ul>, sbb :

<!-- align tengah-->
<ul class="nav justify-content-center">

<!-- align kanan -->
<ul class="nav justify-content-end">

<!-- nav vertikal -->
<ul class="nav flex-column">