Selamat datang di tutorial Bootstrap ke-12! Setelah pada bagian sebelumnya kita membahas Navigasi Tabs dan Pills, kali ini kita akan naik ke level berikutnya dengan mempelajari salah satu komponen paling penting dan sering digunakan di setiap website: Navbar.

Navbar atau menu navigasi adalah baris header yang biasanya terletak di bagian atas halaman. Komponen ini berfungsi sebagai navigasi utama situs, berisi tautan ke halaman-halaman penting, logo atau nama brand, dan terkadang formulir pencarian atau tombol lainnya. Bootstrap menyediakan komponen Navbar yang sangat kuat, fleksibel, dan yang terpenting, sepenuhnya responsif.

Struktur Dasar Navbar

Mari kita mulai dengan struktur paling dasar dari sebuah Navbar. Komponen ini terdiri dari beberapa kelas inti yang bekerja sama.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    </div>
</nav>

Mari kita bedah kelas-kelas utamanya:

• .navbar: Kelas wajib untuk mendefinisikan sebuah komponen sebagai Navbar.
• .navbar-expand-lg: Ini adalah kelas kunci untuk responsivitas. Artinya, navbar akan tampil secara horizontal (diperluas) pada layar berukuran large (lg) atau lebih besar, dan akan “runtuh” (menjadi menu hamburger) pada layar yang lebih kecil. Anda bisa mengganti lg dengan sm, md, atau xl untuk mengubah titik di mana navbar akan runtuh.
• .navbar-light: Digunakan untuk teks berwarna gelap. Kelas ini paling baik digunakan dengan background terang (bg-light). Jika Anda menggunakan background gelap, gunakan kelas .navbar-dark agar teks menjadi terang.
• .bg-light: Kelas utilitas Bootstrap untuk memberikan warna latar belakang terang pada navbar. Anda bisa menggantinya dengan kelas warna lain seperti .bg-dark, .bg-primary, dll.
• .container atau .container-fluid: Menentukan lebar konten di dalam navbar. .container-fluid akan membuat lebarnya 100%, sedangkan .container akan memberikan lebar tetap yang responsif.

Menambahkan Brand atau Logo

Setiap Navbar biasanya memiliki nama situs atau logo. Kita bisa menambahkannya menggunakan kelas .navbar-brand.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/path/to/logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      SitusKeren
    </a>
  </div>
</nav>

Kelas .navbar-brand memberikan gaya khusus pada teks atau gambar agar terlihat menonjol sebagai identitas situs.

Menambahkan Link Navigasi

Tentu saja, fungsi utama Navbar adalah untuk navigasi. Link navigasi dibuat menggunakan daftar <ul> dengan struktur kelas yang spesifik.

<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>
</ul>

• .navbar-nav: Kelas wajib pada <ul> untuk menampung link navigasi.
• .nav-item: Diterapkan pada setiap <li>.
• .nav-link: Diterapkan pada tag <a> di dalamnya.
• .active: Menandai halaman yang sedang aktif.

Membuat Navbar Responsif (Tombol Hamburger)

Sekarang, bagian terpenting: membuat menu ini bisa diakses di perangkat mobile. Kita perlu menambahkan tombol “toggler” (hamburger) dan membungkus link navigasi kita dalam sebuah div yang bisa “collapsible” (diruntuhkan).

1. Tombol Toggler: Tombol ini hanya akan muncul di layar kecil.
2. Konten Collapsible: Wrapper <div> yang akan menyembunyikan atau menampilkan link navigasi saat tombol toggler diklik.

Mari kita gabungkan semuanya:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">NavbarKu</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 ms-auto mb-2 mb-lg-0">
        <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="#">Profil</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Kontak</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Penjelasan Kode Responsif:

• <button>: Tombol ini memiliki kelas .navbar-toggler.
  • data-bs-toggle="collapse": Memberitahu JavaScript Bootstrap untuk mengontrol elemen yang bisa runtuh.
  • data-bs-target="#navbarNav": Menargetkan elemen dengan id="navbarNav" untuk ditampilkan/disembunyikan.
• <div>: Div ini memiliki kelas .collapse dan .navbar-collapse.
  • id="navbarNav": ID ini harus sama dengan data-bs-target pada tombol agar keduanya terhubung.
• .ms-auto: Kelas margin (margin-start: auto) ini mendorong menu ke sisi kanan navbar. Anda juga bisa menggunakan .me-auto untuk mendorongnya ke kiri.

Menambahkan Komponen Lain

Navbar Bootstrap sangat fleksibel. Anda bisa menambahkan dropdown, formulir pencarian, atau teks.

1. Dropdown

Cukup tambahkan struktur dropdown di dalam sebuah .nav-item.

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Layanan
  </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" href="#">Layanan 1</a></li>
    <li><a class="dropdown-item" href="#">Layanan 2</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Layanan Spesial</a></li>
  </ul>
</li>

2. Formulir Pencarian

Anda bisa menambahkan formulir langsung di dalam navbar, sering kali menggunakan kelas .d-flex untuk menatanya.

<form class="d-flex" role="search">
  <input class="form-control me-2" type="search" placeholder="Cari..." aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Cari</button>
</form>

Posisi Navbar

Secara default, navbar adalah elemen statis. Namun, Anda bisa mengubah posisinya dengan kelas-kelas berikut:

• .fixed-top: Menempelkan navbar di bagian atas layar. Navbar akan tetap terlihat saat halaman di-scroll.
• .fixed-bottom: Menempelkan navbar di bagian bawah layar.
• .sticky-top: Navbar akan berada di posisi normalnya hingga pengguna men-scroll melewatinya, lalu ia akan “menempel” di bagian atas layar.

Contoh Penggunaan: <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">

Kesimpulan

Navbar adalah komponen fundamental dalam desain web, dan Bootstrap membuatnya sangat mudah untuk membangun menu navigasi yang kaya fitur dan responsif. Dengan memahami struktur dasar .navbar, mekanisme .navbar-expand-*, serta cara kerja tombol toggler dan collapse, Anda bisa membuat berbagai macam menu navigasi untuk proyek web Anda.