Anatomi
Top Navbar terdiri dari beberapa elemen utama:
- Logo / Brand → identitas aplikasi, selalu di kiri, dan menjadi link ke halaman utama.
- Menu Utama → link ke halaman inti, biasanya diletakkan di tengah.
- Action Items → Diletakkan di sisi kanan, berisi tombol atau icon-icon sebagai jalan pintas untuk menuju fungsi yang sering digunakan seperti pencarian, pemberitahuan, dan sebagainya.
States
Terdapat 5 states untuk Menu dan Action Itmes, yakni Default, Focused, Hovered, Pressed, dan Active. Berikut contoh gambar dan penjelasannya:
- Default: Tampilan standar saat pengguna belum melakukan aksi apapun.
- Focused: Tampilan Menu saat keyboard fokus pada sebuah Menu.
- Hovered: Tampilan Menu saat mouse hover pada sebuah Menu.
- Pressed: Tampilan Menu saat mouse klik pada sebuah Menu.
- Active: Tampilan Menu saat menu tersebut terpilih.
Jenis dan Variasi
Ada beberapa variasi untuk top navbar sesuai kebutuhan produk:
- Default → Digunakan untuk menavigasikan website yang cukup kompleks namun dengan tampilan yang compact.
- Without Action Items → Digunakan di halaman web yang bersifat informational atau landing page sederhana yang tidak memerlukan aksi khusus.
- Without Menu Items → Biasanya digunakan di halaman admin atau dashboard. Untuk navigasi yang lebih kompleks biasanya digunakan bersamaan dengan vertical navbar
- Logo Only → Jarang dipakai di halamaan web. Biasanya dipakai untuk mobile native dengan bottom navbar sebagai navigasi utama.
Panduaan Penggunaan
Peletakkan
Top Navbar diletakkan sticky diatas, artinya navbar akan bergulir secara normal bila ada kompoonen lain diatasnya (bisa terjadi saat ada beberapa layer tambahan untuk navbar), ketika navbar utama sudah berada diposisi paling atas, navbar akan tetap meski halaman digulir.
Jumlah dan Penamaan Menu
Tidak ada aturan baku berapa jumlah menu yang harus ditampilkan. Namun apabila jumlah menu yang perlu ditampilkan terlalu banyak sehingga jarak antara menu dan logo atau action items sudah terlalu sempit (< 24px), simpan menu berlebih dalam menu “Lainnya”.
Logo Brand
- Pastikan logo brand bisa terlihat dengan jelas di navbar, jangan gunakan pictorial marks atau logo symbols untuk brand yang belum dikenal luas.
- Untuk produk modern dengan target pengguna digital-savvy, cukup gunakan logo sebagai link ke beranda. Namun untuk produk dengan target pengguna awam, lebih aman menambahkan menu “Beranda”, tapi tetap biarkan logo bisa diklik.
Responsif
- Gunakan icon hamburger pada layar kecil (< 769px) untuk menyimpan menu dan action item.
