Cara Membuat Navbar Ala Android dengan HTML, CSS, dan JavaScript

Pengantar

Navbar bawah sering digunakan di aplikasi mobile untuk memudahkan navigasi pengguna. Di web, kamu juga bisa meniru gaya ini agar website terasa seperti aplikasi mobile native.

1. Struktur HTML

Kita mulai dengan membuat struktur dasar navbar:

<div class="bottom-navbar">
  <a href="#" class="nav-item active">
    <span>🏠</span>
    <small>Home</small>
  </a>
  <a href="#" class="nav-item">
    <span>🔍</span>
    <small>Search</small>
  </a>
  <a href="#" class="nav-item">
    <span>👤</span>
    <small>Profile</small>
  </a>
</div>

2. Gaya CSS

Berikut CSS untuk membuat tampilan ala Android:

<style>
.bottom-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 999;
}

.nav-item {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #666;
  font-size: 14px;
  padding: 6px 0;
}

.nav-item span {
  display: block;
  font-size: 20px;
}

.nav-item.active {
  color: #007bff;
  font-weight: bold;
}
</style>

Kamu bisa menambahkan ikon dari Font Awesome atau emoji seperti contoh di atas.

3. Fungsi JavaScript (Opsional)

Kalau kamu ingin menambahkan efek aktif saat salah satu menu diklik, gunakan JavaScript ini:

<script>
document.querySelectorAll('.nav-item').forEach(item => {
  item.addEventListener('click', function() {
    document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
    this.classList.add('active');
  });
});
</script>

4. Hasil dan Tips Responsif

Navbar ini akan muncul di bagian bawah layar dan tetap berada di sana saat pengguna scroll. Sangat cocok untuk website mobile atau PWA (Progressive Web App).

Tips tambahan:

Gunakan media query untuk menyesuaikan ukuran ikon dan teks di layar kecil
Pastikan tidak menimpa elemen penting lain seperti tombol atau input

Kesimpulan

Dengan sedikit kode HTML, CSS, dan JavaScript, kamu sudah bisa membuat navbar ala Android yang keren dan fungsional. Ini bisa meningkatkan pengalaman pengguna dan membuat website-mu terasa lebih modern seperti aplikasi mobile.

Jangan ragu untuk mengembangkan desain ini dengan animasi, ikon SVG, atau integrasi ke framework seperti React atau Vue!