navbar html css simple Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/navbar-html-css-simple/ Tue, 31 Mar 2026 13:52:40 +0000 id hourly 1 https://wordpress.org/?v=7.0 https://farhanhidayat.com/wp-content/uploads/2024/11/cropped-Favicon-Farhanhidayat-32x32.png navbar html css simple Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/navbar-html-css-simple/ 32 32 10 Navbar HTML CSS Simple & Keren (Copy Paste, Anti Ribet) https://farhanhidayat.com/navbar-html-css-simple/ https://farhanhidayat.com/navbar-html-css-simple/#respond Tue, 31 Mar 2026 13:52:40 +0000 https://farhanhidayat.com/?p=2335 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 […]

Artikel 10 Navbar HTML CSS Simple & Keren (Copy Paste, Anti Ribet) pertama kali tampil pada Farhanhidayat.com.

]]> 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 πŸ˜„

Kenapa Navbar Itu Penting di Website?

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.

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

Ciri Navbar HTML CSS Simple yang Bagus

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.

10 Navbar HTML CSS Simple & Keren (Siap Copy Paste)

 

1. Simple Clean Navbar

Navbar ini paling basic, tapi justru paling sering dipakai.

  • 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.

Ganti warna utama

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

Ganti background navbar

.navbar {
  background: #6a6ff5;
}

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

Tambahin garis bawah saat hover

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

2. Navbar dengan CTA Button

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.

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.

3. Responsive Navbar (Hamburger Menu)

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.

4. Center Logo Navbar

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.

5. Sticky Navbar (Nempel Saat Scroll)

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.

6. Transparent Navbar

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.

7. Navbar Transparan β†’ Solid Saat Scroll

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.

8. Dropdown Menu Navbar

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.

9. Glassmorphism Navbar

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.

10. Minimal Icon Navbar

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.

Kesalahan yang Sering Terjadi Saat Membuat Navbar

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

Tips Biar Navbar Kamu Lebih Maksimal

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.

Cara Menggunakan Kode Navbar Ini (Biar Langsung Jalan)

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

  1. Copy kode HTML & CSS
  2. Simpan dalam file .html
  3. Buka di browser
  4. 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.

FAQ

1. Apakah navbar ini bisa dipakai untuk semua website?

Iya, semua contoh di sini fleksibel dan bisa dipakai untuk berbagai jenis website.

2. Harus jago coding dulu nggak?

Nggak perlu. Kamu cukup copy paste dan ubah dikit sesuai kebutuhan.

3. Gimana cara bikin navbar jadi responsive?

Kamu bisa pakai versi hamburger menu atau tambahkan media query di CSS.

Artikel 10 Navbar HTML CSS Simple & Keren (Copy Paste, Anti Ribet) pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/navbar-html-css-simple/feed/ 0