Navbar

Navbar merupakan elemen navigasi utama yang membantu pengguna berpindah antarhalaman atau fitur dalam aplikasi. Komponen ini berfungsi sebagai orientasi visual dan titik akses cepat menuju area penting di dalam sistem.

Navbar biasanya berisi elemen seperti logo, menu utama, kolom pencarian, ikon tindakan (notifikasi, pengaturan), serta profil pengguna. Penempatannya di bagian atas halaman membantu menjaga konsistensi pengalaman pengguna dan memudahkan akses ke navigasi global.

Penggunaan

Gunakan Navbar (Navigation bar) pada aplikasi atau situs yang memiliki banyak halaman atau modul, agar pengguna dapat dengan mudah mengakses informasi dan fitur utama tanpa kehilangan konteks. Navbar juga dapat dipasangkan dengan komponen sidebar untuk memperluas fungsi navigasi dan memberikan akses tambahan ke menu sekunder.

Anatomi

Kategori

Top Navbar (Default)

Navbar ditampilkan di bagian atas layar, berisi logo, menu utama, kolom pencarian, dan ikon aksi. Cocok untuk aplikasi dengan struktur halaman yang sederhana.

Navbar dengan Submenu

Menambahkan dropdown menu di bawah menu utama. Digunakan pada sistem dengan banyak kategori atau tingkat hierarki navigasi yang kompleks, seperti dashboard manajemen atau portal layanan publik.

Cara Penggunaan yang Disarankan

✅ Disarankan

Letakkan logo di sisi kiri untuk menjaga konsistensi identitas visual.

❌ Dihindari

Hindari menempatkan logo di tengah dan kiri, karena dapat mengganggu fokus navigasi.

✅ Disarankan

Gunakan 4-5 menu utama agar tampilan tetap seimbang dan mudah dibaca.

❌ Dihindari

Hindari menampilkan terlalu banyak ikon atau menu dalam satu baris.

Penerapan

Halaman Dashboard / Beranda Aplikasi

Navbar digunakan untuk menampilkan logo aplikasi, menu utama, kolom pencarian, serta ikon notifikasi dan profil pengguna.

Pola ini membantu pengguna mengenali konteks sistem (misalnya, INA Gov) dan memudahkan navigasi ke fitur-fitur seperti Dashboard, Laporan, atau Manajemen Data.

Spesifikasi