Membuat Navigation Bar pada Bootstrap

4.5/5 (8)
Membuat Navigation Bar pada Bootstrap
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.

Baca juga: Membuat Contact Form CSS.

Membuat Navigation Bar pada Bootstrap

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,

Basic Horizontal Menu
Basic Horizontal Menu

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,

See the Pen Bootstrap Navbar | codelatte.org by Abay (@abaykan) on CodePen.

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.

Please rate this

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

3 tanggapan untuk “Membuat Navigation Bar pada Bootstrap

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *