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

6 tanggapan untuk “Membuat Navigation Bar pada Bootstrap

    • 1 Agustus 2018 pada 1:57 AM
      Permalink

      Bisa pake

      < div class="nav flex-column">...< /div>
      Balas
  • 22 Juli 2019 pada 12:31 AM
    Permalink

    Gan kok yang saya dropdown-nya gak mau keluar ya?

    Balas
    • 26 Juli 2019 pada 3:15 PM
      Permalink

      File-file .js nya udah dipanggil juga gan?

      Balas
  • 13 September 2019 pada 1:52 AM
    Permalink

    Terdampar di website ni serasa menemukan harapan baru,
    Sekarang ane stay disini,berpaling dari ebook2gua yg gajelas itu,he heh….,yang pasti bahasa translate ane merah

    Balas

Tinggalkan Balasan

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