Membuat Navbar Responsive dengan HTML dan CSS

Membuat Navbar Responsive dengan HTML dan CSS adalah langkah penting agar navigasi website tetap rapi, cepat dipahami, dan enak dipakai di layar ponsel maupun desktop.

Halo teman-teman, semoga coding kalian lancar hari ini. Pada artikel ini kodelyly.com akan membahas cara praktis membangun navbar yang elegan tanpa library, cukup memakai HTML dan CSS sehingga performa tetap ringan serta mudah dirawat.

Membuat Navbar Responsive Dengan HTML Dan CSS

Struktur Dasar HTML

Mulailah dengan elemen semantik <nav> agar mesin pencari dan pembaca layar memahami fungsi navigasi. Kita gunakan teknik checkbox untuk toggle menu di layar kecil sehingga tidak butuh JavaScript.

<nav class="navbar" aria-label="Navigasi utama">
  <div class="brand">Kodelyly</div>
  <input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="Buka menu">
  <label for="nav-toggle" class="toggle" aria-hidden="true">&#9776;</label>
  <ul class="menu">
    <li><a href="/">Beranda</a></li>
    <li><a href="/tutorial">Tutorial</a></li>
    <li><a href="/projek">Projek</a></li>
    <li><a href="/kontak">Kontak</a></li>
  </ul>
</nav>

CSS Dasar Untuk Navbar

Atur layout agar brand dan menu sejajar pada layar lebar. Beri kontras warna, ruang, dan efek hover fokus supaya mudah diakses.

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}

.navbar{position:sticky;top:0;z-index:50;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{font-weight:700;letter-spacing:.4px}

.menu{list-style:none;margin:0;padding:0;display:flex;gap:16px}
.menu a{color:#fff;text-decoration:none;padding:8px 10px;border-radius:10px}
.menu a:hover,.menu a:focus{background:rgba(255,255,255,.12);outline:2px solid transparent}

.toggle{display:none;cursor:pointer;font-size:24px;user-select:none}
.nav-toggle{display:none}

:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}

Membuat Navbar Menjadi Responsive

Ketika lebar layar kecil, tampilkan ikon menu dan ubah daftar tautan menjadi panel yang dapat dibuka-tutup memakai checkbox.

@media (max-width:768px){
  .toggle{display:block}
  .menu{position:absolute;left:0;right:0;top:56px;background:#0f172a;border-top:1px solid rgba(255,255,255,.15);flex-direction:column;gap:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .menu li a{display:block;padding:14px 20px}
  .nav-toggle:checked ~ .menu{max-height:260px}
}

Tabel Perilaku Breakpoint

Baca Juga:
Membuat Form Login Dengan PHP Tanpa Database

SEO & Aksesibilitas Singkat

Gunakan elemen <nav> dan aria-label agar struktur jelas untuk mesin pencari dan pembaca layar. Teks tautan harus deskriptif, bukan umum seperti “klik di sini”. Pastikan kontras warna memadai, sediakan fokus yang terlihat, dan pertahankan HTML bersih agar crawl SEO lebih efisien. Dengan kata kunci “Membuat Navbar Responsive dengan HTML dan CSS” di judul, heading, serta paragraf, relevansi halaman meningkat.

Kesimpulan

Membuat Navbar Responsive dengan HTML dan CSS bisa dilakukan cepat, ringan, dan aksesibel dengan kombinasi elemen semantik, styling fleksibel, serta trik checkbox untuk toggling di mobile. Jika kalian mengikuti struktur HTML, CSS dasar, dan media query seperti di atas, navigasi akan rapi di semua perangkat sekaligus ramah SEO.

Sekian artikel dari kodelyly.com, semoga bermanfaat dan selamat mencoba! Jika ada pertanyaan, tulis saja di kolom komentar ya.