Cara Membuat Navbar Responsive dengan HTML dan CSS

Navigasi bar (navbar) adalah komponen paling penting di hampir setiap website. Membuat navbar yang responsive — tampil dengan baik di desktop maupun mobile — adalah skill wajib bagi frontend developer. Artikel ini memandu kamu membuat navbar responsive lengkap dengan hamburger menu untuk mobile, menggunakan HTML dan CSS murni tanpa library.

Struktur HTML Navbar

Pertama, buat struktur HTML yang semantik menggunakan tag <nav>:

<nav class="navbar">
  <div class="nav-container">

    <!-- Logo -->
    <a href="#" class="nav-logo">MyBrand</a>

    <!-- Tombol Hamburger (untuk mobile) -->
    <button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
      <span class="hamburger"></span>
      <span class="hamburger"></span>
      <span class="hamburger"></span>
    </button>

    <!-- Menu -->
    <ul class="nav-menu" id="navMenu">
      <li class="nav-item"><a href="#" class="nav-link">Beranda</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Tentang</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Layanan</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
      <li class="nav-item">
        <a href="#" class="nav-link nav-cta">Hubungi Kami</a>
      </li>
    </ul>

  </div>
</nav>

CSS untuk Navbar Desktop

Mulai dengan gaya dasar untuk tampilan desktop (mobile first, lalu expand ke desktop):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: #1e293b;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-logo {
  color: white;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 1px;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 8px;
  align-items: center;
}

.nav-link {
  color: #cbd5e1;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: background-color 0.2s, color 0.2s;
}

.nav-link:hover {
  background-color: #334155;
  color: white;
}

.nav-cta {
  background-color: #3b82f6;
  color: white !important;
}

.nav-cta:hover {
  background-color: #2563eb !important;
}

CSS untuk Hamburger Button

.nav-toggle {
  display: none; /* disembunyikan di desktop */
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background-color: white;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

CSS Media Query untuk Mobile

@media (max-width: 768px) {
  .nav-toggle {
    display: flex; /* tampilkan hamburger */
  }

  .nav-menu {
    display: none; /* sembunyikan menu default */
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    background-color: #1e293b;
    padding: 16px 0;
    gap: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }

  .nav-menu.aktif {
    display: flex; /* tampilkan saat kelas aktif ditambahkan */
  }

  .nav-link {
    padding: 12px 24px;
    border-radius: 0;
    width: 100%;
  }

  .nav-link:hover {
    background-color: #334155;
  }
}

JavaScript untuk Toggle Menu Mobile

<script>
const toggle = document.getElementById('navToggle');
const menu   = document.getElementById('navMenu');

toggle.addEventListener('click', function () {
  menu.classList.toggle('aktif');
});

/* Tutup menu saat link diklik */
document.querySelectorAll('.nav-link').forEach(function(link) {
  link.addEventListener('click', function () {
    menu.classList.remove('aktif');
  });
});

/* Tutup menu saat klik di luar navbar */
document.addEventListener('click', function (e) {
  if (!e.target.closest('.navbar')) {
    menu.classList.remove('aktif');
  }
});
</script>

Animasi Hamburger Menjadi X

Tambahkan efek visual saat menu terbuka — hamburger berubah menjadi ikon X:

.nav-toggle.aktif .hamburger:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.aktif .hamburger:nth-child(2) {
  opacity: 0;
}
.nav-toggle.aktif .hamburger:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

Dan update JavaScript untuk juga toggle kelas pada tombol:

toggle.addEventListener('click', function () {
  menu.classList.toggle('aktif');
  toggle.classList.toggle('aktif');
});

Tips Membuat Navbar yang Baik

• Gunakan tag semantik <nav> dan <ul> untuk aksesibilitas dan SEO.
• Tambahkan aria-label pada tombol hamburger agar screen reader memahami fungsinya.
• Gunakan position: sticky agar navbar menempel di atas saat scroll.
• Tambahkan indikator halaman aktif dengan kelas active pada link yang sedang dikunjungi.
• Pastikan area klik tombol hamburger cukup besar (minimal 44x44px) untuk kemudahan di layar sentuh.

Kesimpulan

Membuat navbar responsive dengan HTML dan CSS murni tidak sesulit yang dibayangkan. Kuncinya adalah memulai dengan struktur HTML yang semantik, menerapkan Flexbox untuk layout desktop, dan menggunakan media query untuk tampilan mobile dengan hamburger menu. Dengan menambahkan sedikit JavaScript untuk toggle, kamu sudah memiliki navbar yang fungsional dan profesional tanpa perlu framework apapun.