Membuat menu navigasi yang intuitif dan responsif adalah salah satu aspek fundamental dalam desain web modern. Pengguna harus dapat dengan mudah menjelajahi situs Anda, terlepas dari perangkat apa yang mereka gunakan, baik itu desktop, tablet, maupun smartphone. Untungnya, framework CSS populer seperti Bootstrap menyediakan komponen siap pakai untuk membangun navigasi yang fungsional dan estetis dengan cepat.

Artikel ini akan memandu Anda langkah demi langkah untuk membuat menu navigasi atau navbar menggunakan Bootstrap. Kita akan membahas struktur dasar, cara membuatnya responsif, hingga kustomisasi tampilan.

Struktur Dasar Navbar Bootstrap

Komponen utama untuk membuat navigasi di Bootstrap adalah navbar. Struktur dasarnya cukup sederhana dan mengandalkan beberapa kelas CSS yang sudah didefinisikan oleh Bootstrap.

Berikut adalah elemen-elemen kunci dalam membangun sebuah navbar:

• <nav class="navbar">: Ini adalah elemen pembungkus utama yang menandakan bahwa kita sedang membuat sebuah navigasi.
• navbar-expand-{breakpoint}: Kelas ini sangat penting untuk fungsionalitas responsif. {breakpoint} bisa diisi dengan sm, md, lg, xl, atau xxl. Kelas ini menentukan pada ukuran layar seberapa navbar akan “mengembang” (tampil horizontal) sebelum “menciut” (menjadi menu toggle/hamburger). Contohnya, navbar-expand-lg berarti navbar akan menciut pada layar yang lebih kecil dari ukuran large (992px).
• navbar-brand: Digunakan untuk logo atau nama situs Anda. Biasanya ditempatkan di sisi kiri navbar.
• navbar-toggler: Ini adalah tombol hamburger yang akan muncul di perangkat mobile untuk menampilkan atau menyembunyikan menu. Tombol ini memerlukan atribut data-bs-toggle="collapse" dan data-bs-target yang menunjuk ke ID dari konten navigasi yang dapat diciutkan.
• <div class="collapse navbar-collapse">: Kontainer ini membungkus semua item menu navigasi Anda. Konten di dalamnya akan disembunyikan pada layar kecil dan baru muncul ketika tombol toggler diklik.
• <ul class="navbar-nav">: Digunakan untuk mengelompokkan item-item menu.
• <li class="nav-item">: Setiap item dalam daftar menu.
• <a class="nav-link">: Tautan atau link dari setiap item menu.

Contoh Kode Dasar

Berikut adalah contoh kode HTML untuk membuat navbar Bootstrap yang sederhana dan responsif:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">LogoSitus</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Beranda</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Fitur</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Harga</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Nonaktif</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Dalam contoh di atas, menu akan ditampilkan secara horizontal pada layar berukuran large dan lebih besar. Pada layar yang lebih kecil, item menu akan disembunyikan dan digantikan oleh sebuah tombol hamburger.

Kustomisasi Tampilan

Bootstrap menawarkan beberapa kelas utilitas untuk mengubah tampilan navbar dengan mudah tanpa harus menulis CSS kustom.

Skema Warna

Anda dapat dengan cepat mengubah warna navbar menggunakan kelas navbar-dark atau navbar-light yang dikombinasikan dengan kelas warna latar belakang (bg-*).

• navbar-dark: Cocok digunakan untuk latar belakang berwarna gelap, karena akan membuat teks link menjadi terang.
• navbar-light: Cocok untuk latar belakang berwarna terang, karena akan membuat teks link menjadi gelap.

Contoh Navbar Gelap:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  </nav>

Contoh Navbar dengan Warna Primer:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  </nav>

Penempatan Konten

Secara default, item menu (navbar-nav) akan berada di sisi kiri setelah navbar-brand. Jika Anda ingin menempatkan item menu di tengah atau di kanan, Anda bisa menggunakan kelas flexbox.

• Menu di Kanan: Tambahkan kelas ms-auto (margin-start: auto) pada elemen <ul> untuk mendorongnya ke kanan.
  HTML

  <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
  

• Menu di Tengah: Tambahkan kelas mx-auto (margin-x: auto) untuk menempatkannya di tengah.
  HTML

  <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
  

Menambahkan Formulir dan Teks

Navbar Bootstrap juga mendukung penambahan elemen lain seperti formulir pencarian atau teks. Anda bisa menggunakan kelas d-flex pada elemen <form> untuk menampilkannya secara inline.

Contoh dengan Formulir Pencarian:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Cari" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Cari</button>
    </form>
  </div>
</nav>

Dengan memahami komponen dan kelas utilitas yang disediakan Bootstrap, Anda dapat dengan mudah membangun berbagai jenis menu navigasi yang tidak hanya fungsional tetapi juga responsif dan menarik secara visual, mempercepat proses pengembangan web Anda secara signifikan.