Menu Navigasi dengan Bootstrap 4

Menu navigasi adalah suatu menu yang bertujuan untuk mengantarkan pengunjung website kita menuju informasi sesuai menu yang di klik. Diharapkan halaman yang dituju berisi tentang informasi sesuai dengan judul menu navigasi. Umumnya dalam website paling tidak memiliki satu buat menu navigasi utama sebagai pondasi awal website. Sesuai dengan tema pembahasan kita pada kali ini, kita akan membahas bagaimana cara membuat menu navigasi dengan bootstrap 4.

Bagi yang baru mengikuti, boostrap adalah suatu framework CSS yang sekarang ini sudah versi 4. Pada versi ini terdapat beberapa pembaharuan yang terjadi seperti cara membuat class navigasinya sampai class baru yang dapat membantu kalian untuk membuat menu navigasi menjadi lebih menarik lagi. Selain lebih menarik, bootstrap juga menawarkan tampilanya yang responsive sehingga sangat cocok untuk tampilan mobile. Untuk mempersingkat waktu kalian bisa coba ikuti contoh perintah pembuat navigasi pada code dibawah ini.

nav.html

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">  
</head>
<body style="background:#ccc;">
    <ul class="nav bg-white" style="padding: 20px 0;">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
</body>
</html>

Jika sudah kalian bisa simpan file tersebut dengan format html. Untuk melihat hasilnya kalian bisa buka filenya pada browser kesayangan kalian. Dan tampilanya akan muncul seperti ini.

Jika pada bootstrap 3 hanya bisa 2 warna saja yaitu navbar-defaul atau navbar-inverse. Dengan bootstrap 4 kalian bisa mengganti warna navigasinya lebih banyak lagi. Caranya dengan menambahkan class bg-white untuk warna putih. Untuk warna lainya kalian cukup mengganti tulisan white dengan dark untuk hitam, primary untuk biru, success untuk hijau, info untuk biru muda, warning untuk kuning dan danger untuk merah. Sehingga hasilnya akan seperti ini.

Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat menu navigasi dengan bootstrap 4. Semoga pembahasan pada artikel kali ini bermanfaat dan menginspirasi kalian semua. Sampai jumpa pada artikel menarik dan seru lainya ya.