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.id</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.id</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.id</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.id</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.id 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.

6 CommentsClose Comments

6 Comments

  • Ardi Pratama
    Posted 31 July 2018 at 9:26 PM 0Likes

    Bisa bikin navbar di bagian sidebar ga kang?

    • Posted 1 August 2018 at 1:57 AM 0Likes

      Bisa pake

      < div class="nav flex-column">...< /div>
  • xelt ID
    Posted 1 August 2018 at 9:24 AM 0Likes

    mntaapp gan…tingkatkan lagii!!!

  • Syahidan
    Posted 22 July 2019 at 12:31 AM 0Likes

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

    • Posted 26 July 2019 at 3:15 PM 0Likes

      File-file .js nya udah dipanggil juga gan?

  • Agus
    Posted 13 September 2019 at 1:52 AM 0Likes

    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

Leave a Reply