Membuat Navigation Bar pada Bootstrap

Membuat Navigation Bar pada Bootstrap – Navigation bar, menu navigasi atau biasa disebut navbar, menurut saya adalah salah satu komponen penting dari sebuah website. Di dalamnya bisa berisi jalan pintas menuju ke halaman – halaman unggulan milik kita, seperti Profil, Sejarah, Tentang, Halaman Kontak sampai form pencarian.

Membuat Navigation Bar pada Bootstrap

https://codelatte.org

Seperti biasa, kita akan mencoba membuat bagian ini menggunakan Bootstrap. Caranya sangat mudah, hanya menambahkan class yang sudah disediakan oleh Bootstrap. Kita mulai dengan yang paling sederhana yaitu menu horizontal basic. Buat sebuah file HTML, lalu pastekan kode ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>codelatte.org</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Membuat Navigation Bar pada Bootstrap | codelatte.org</h2>
  <p>Navbar horizontal basic:</p>
  <ul class="nav">
    <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" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>
</body>
</html>

Hasilnya akan menjadi seperti ini,

Membuat Dropdown pada Navbar Bootstrap

Jika memperhatikan navbar pada situs ini, saya menggunakan dropdown menu untuk halaman – halaman tentang situs ini. Bagaimana cara membuatnya? Gunakan kode dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>codelatte.org</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Dropdown Menu | codelatte.org</h2>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a></div>
    </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>
</div>
</body>
</html>

Untuk demo nya bisa dilihat dibawah ini,

Class Tambahan

Ada beberapa class lain juga untuk bagian Navbar ini, diantaranya adalah:

.justify-content-center > Membuat navbar berada di tengah.
.justify-content-end > Navbar berada di kanan.
.flex-column > Vertical navbar.
.nav-tabs > Mengubah menu navigasi menjadi tab navigasi.

Sekian pembahasan tentang Membuat Navigation Bar pada Bootstrap, seperti biasa, jika ada yang ingin ditanyakan, silahkan isi kolom komentar. Semoga bermanfaat dan sampai jumpa di artikel selanjutnya.

Iklan

Membuat Navigation Bar pada Bootstrap