Sidebar

Sidebar berfungsi sebagai navigasi utama aplikasi, memberikan akses cepat ke halaman-halaman inti seperti Dashboard, Data Pengguna, dan Pengaturan.

Komponen ini membantu pengguna memahami konteks lokasi mereka dalam sistem serta berpindah antar halaman tanpa kehilangan arah.

Penggunaan

Gunakan Sidebar untuk menampilkan daftar menu utama yang membantu pengguna menavigasi sistem dengan cepat dan konsisten.

Komponen ini cocok digunakan pada aplikasi berskala besar atau multi-fitur yang memerlukan struktur navigasi hierarkis, seperti dashboard internal atau sistem manajemen data.

Hindari penggunaan Sidebar pada halaman tunggal atau tampilan yang tidak memerlukan perpindahan antar halaman, seperti layar onboarding atau form berdurasi pendek.

Kategori

Expand

Menampilkan semua elemen menu secara penuh, termasuk ikon, label teks, dan status aktif. Cocok untuk tampilan desktop dengan ruang layar yang cukup, sehingga pengguna dapat melihat semua opsi navigasi sekaligus.

Collapse

Menampilkan menu dalam bentuk ikon saja. Cocok untuk tampilan sempit seperti tablet atau laptop kecil, agar ruang layar tetap efisien tanpa mengurangi fungsi navigasi utama.

Interaksi

Sidebar memberikan umpan balik visual yang jelas untuk navigasi pengguna. Interaksi dirancang untuk meningkatkan kejelasan posisi pengguna di dalam sistem, terutama melalui tiga kondisi utama.

Default Menu Item

Tampilan standar saat menu tidak berinteraksi.

Hovered Menu Item

Menyoroti item menu saat kursor diarahkan, membantu pengguna mengenali opsi yang dapat dipilih.

Selected Menu Item

Menunjukkan halaman aktif saat ini, membantu pengguna memahami konteks lokasi mereka di sistem.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan maksimal 2 kata untuk nama menu agar mudah dipindai dan dipahami.

❌ Dihindari

Hindari penggunaan label menu yang terlalu panjang atau ambigu.

✅ Disarankan

HiGunakan ikon yang relevan dan konsisten untuk memperjelas fungsi tiap menu.

❌ Dihindari

Hindari penggunaan ikon yang tidak relevan atau tidak mewakili fungsi dari menu.

✅ Disarankan

Prioritaskan menu yang paling sering diakses di bagian atas Sidebar.

❌ Dihindari

Hindari menempatkan menu penting di bagian bawah Sidebar.

✅ Disarankan

Gunakan hierarki maksimal 2 level untuk menghindari struktur navigasi yang terlalu dalam.

❌ Dihindari

Jangan buat struktur menu lebih dari 2–3 level agar navigasi tetap sederhana dan efisien.

Penerapan

Navigasi Utama

Gunakan Sidebar untuk membantu pengguna memahami struktur aplikasi dan berpindah antar bagian dengan cepat.

Contohnya pada halaman Dashboard di mana Sidebar menampilkan daftar modul utama seperti User Management atau Company Settings.