Home Coding 10 Navbar HTML CSS Simple & Keren (Copy Paste, Anti Ribet)

10 Navbar HTML CSS Simple & Keren (Copy Paste, Anti Ribet)

Farhan Hidayat 31 Maret 2026 8 min read

Lagi cari navbar HTML CSS simple yang bisa langsung dipakai tanpa ribet? Tenang, kamu nggak sendirian. Banyak yang stuck di bagian ini waktu bikin website.

Nah, di artikel ini kamu bakal nemuin 10 contoh navbar keren yang tinggal copy paste aja. Jadi kamu nggak perlu pusing ngoding dari nol, cukup pakai, edit dikit, dan langsung jadi 😄

Sebelum masuk ke contoh, kita bahas dikit biar kamu makin paham.

Navbar itu ibarat “jalan utama” di website kamu. Kalau navigasinya jelas, pengunjung bakal lebih nyaman jelajah isi website. Sebaliknya, kalau navbar berantakan, orang bisa langsung kabur.

Also Read: Cara Membuat Navbar Responsive Tanpa Ribet (HTML CSS)

Selain itu, navbar juga bikin tampilan website jadi lebih profesional. Bahkan, desain sederhana pun bisa keliatan mahal kalau navbar-nya rapi.

Biar nggak asal pilih, ini beberapa ciri navbar yang layak kamu pakai:

Strukturnya clean dan mudah dibaca
Menu tidak terlalu banyak
Warna enak dilihat dan kontras
Ringan dan cepat di-load
Mudah diubah sesuai kebutuhan

Intinya, simple tapi tetap enak dipakai.

Also Read: Roadmap Web Developer dari Nol hingga Bisa Ngoding dalam 3 Bulan

Navbar ini paling basic, tapi justru paling sering dipakai.

Also Read: Cara Membuat Strongest Password Generator Python Sederhana

Cocok untuk: portfolio, landing page
Kelebihan: ringan, rapi, nggak ribet

👉 Tinggal copy paste, langsung jadi navbar standar yang aman dipakai di mana aja.

Kode HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Navbar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <nav class="navbar">
    <div class="logo">DayatDev</div>
    <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</body>
</html>

Kode CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background: #f5f5f5;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 8%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Logo */
.logo {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/* Menu */
.nav-links {
  list-style: none;
  display: flex;
  gap: 25px;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  transition: 0.3s;
}

/* Hover effect */
.nav-links a:hover {
  color: #6a6ff5;
}

Penjelasan Singkat

Navbar ini pakai flexbox, jadi otomatis rapi:

space-between → logo kiri, menu kanan
gap → jarak antar menu
hover → kasih efek interaktif

Simple, tapi udah cukup buat website profesional.

Also Read: Cara Membuat Program Kasir Sederhana dengan Fitur Hitung Diskon

Ganti warna utama

.nav-links a:hover {
  color: #ff6600;
}

.navbar {
  background: #6a6ff5;
}

.nav-links a {
  color: #fff;
}

Tambahin garis bawah saat hover

.nav-links a:hover {
  border-bottom: 2px solid #6a6ff5;
}

Kalau kamu pengen navbar yang lebih “niat”, ini pilihan bagus.

Ada tombol seperti “Login” atau “Kontak”
Bikin tampilan lebih profesional

Biasanya dipakai di website bisnis atau jualan.

Also Read: Baru Tahu? Ternyata Kalkulator Sederhana Python Bisa Dibuat dalam 5 Menit!

HTML

<nav class="navbar">
  <div class="logo">DayatDev</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Pricing</a></li>
  </ul>
  <a href="#" class="btn">Get Started</a>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 8%;
  background: #fff;
}

.btn {
  background: #6a6ff5;
  color: #fff;
  padding: 8px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s;
}

.btn:hover {
  background: #4c50d3;
}

👉 Cocok buat landing page atau jualan.

Sekarang hampir semua website butuh versi mobile.

Desktop: menu biasa
Mobile: berubah jadi hamburger

Jadi, website kamu tetap nyaman dibuka di HP.

HTML

<nav class="navbar">
  <div class="logo">DayatDev</div>
  <div class="menu-toggle">☰</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

.menu-toggle {
  display: none;
  font-size: 22px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
  }

  .nav-links.active {
    display: flex;
  }
}

JS

<script>
const toggle = document.querySelector(".menu-toggle");
const nav = document.querySelector(".nav-links");

toggle.onclick = () => {
  nav.classList.toggle("active");
};
</script>

👉 Wajib kalau target user mobile.

Berbeda dari yang lain, logo ada di tengah.

Menu di kiri dan kanan
Cocok untuk branding

Hasilnya keliatan lebih unik dan beda.

HTML

<nav class="navbar">
  <ul class="left">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>

  <div class="logo">DayatDev</div>

  <ul class="right">
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left, .right {
  display: flex;
  gap: 20px;
  list-style: none;
}

👉 Cocok buat branding biar beda.

Navbar ini tetap di atas walaupun halaman di-scroll.

User nggak perlu scroll ke atas lagi
Navigasi jadi lebih cepat

Selain itu, UX juga jadi lebih enak.

CSS

.navbar {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;
}

👉 Navbar tetap di atas saat scroll.

Navbar ini menyatu dengan background.

Awalnya transparan
Cocok untuk hero section

Biasanya dipakai di landing page modern.

CSS

.navbar {
  position: absolute;
  width: 100%;
  background: transparent;
  color: #fff;
}

.nav-links a {
  color: #fff;
}

👉 Cocok untuk hero section.

Ini versi upgrade dari transparent navbar.

Awal transparan
Saat scroll berubah warna

Efeknya simpel, tapi keliatan keren banget.

JS

<script>
window.addEventListener("scroll", function() {
  const nav = document.querySelector(".navbar");
  nav.classList.toggle("scrolled", window.scrollY > 50);
});
</script>

CSS

.navbar.scrolled {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

👉 Efek simpel tapi premium.

Kalau menu kamu banyak, ini wajib dipakai.

Ada submenu
Navigasi jadi lebih rapi

Jadi, user nggak bingung walaupun halaman banyak.

HTML

<li class="dropdown">
  <a href="#">Services</a>
  <ul class="dropdown-menu">
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Development</a></li>
  </ul>
</li>

CSS

.dropdown-menu {
  display: none;
  position: absolute;
  background: #fff;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

👉 Solusi kalau menu banyak.

Navbar dengan efek blur seperti kaca.

Tampilan modern
Cocok untuk UI kekinian

Walaupun simple, kesannya premium.

CSS

.navbar {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  padding: 15px;
  border-radius: 10px;
}

👉 UI modern banget.

Navbar ini lebih ringkas.

Pakai icon + teks
Cocok untuk dashboard

Selain itu, tampilannya juga lebih clean.

HTML

<nav class="navbar">
  <a href="#">🏠 Home</a>
  <a href="#">👤 About</a>
  <a href="#">📦 Services</a>
  <a href="#">📞 Contact</a>
</nav>

CSS

.navbar {
  display: flex;
  gap: 20px;
}

.navbar a {
  text-decoration: none;
  color: #333;
}

👉 Cocok buat dashboard / admin.

Walaupun terlihat simpel, tapi faktanya masih banyak yang salah saat bikin navbar.

Terlalu banyak menu → bikin bingung
Warna kurang kontras → susah dibaca
Tidak responsive → jelek di HP
Desain terlalu ramai → berat loading

Makanya, supaya nggak bikin bingung, lebih baik pilih navbar yang simple tapi tetap jelas

Biar hasilnya makin keren, kalau mau lebih maksimal, coba lakukan beberapa hal berikut:

Gunakan warna sesuai branding
Jaga jarak antar menu biar rapi
Tambahkan efek hover sederhana
Jangan terlalu banyak animasi
Tes di laptop dan HP

Selain itu, supaya tampilannya nggak flat, kamu bisa menambahkan animasi biar terasa lebih hidup.

Tenang aja, supaya lebih mudah dipahami, sebenarnya caranya gampang banget, jadi kamu bisa mulai dari langkah berikut:

Copy kode HTML & CSS
Simpan dalam file .html
Buka di browser
Edit teks, warna, atau menu sesuai kebutuhan

Dalam beberapa menit aja, kamu pun bisa langsung punya navbar yang siap dipakai.

Kesimpulan

Sebenarnya, bikin navbar HTML CSS simple itu nggak sesulit yang dibayangin. Jadi, dengan contoh yang tepat, kamu pun bisa langsung pakai tanpa ribet. Nah, sekarang kamu tinggal pilih style yang paling cocok, lalu cukup copy paste dan sedikit custom, sehingga akhirnya navbar keren untuk website kamu bisa langsung dipakai.