Drawer

Drawer menampilkan panel tambahan dari sisi layar yang berisi menu atau informasi pendukung. Komponen ini menjaga tampilan utama tetap bersih sambil tetap memberi akses ke konten tambahan saat dibutuhkan.

Penggunaan

Gunakan Drawer untuk menampilkan navigasi tambahan atau konten pendukung tanpa mengganggu tampilan utama. Komponen ini bisa muncul dari bawah, kiri, atau kanan layar, dan ideal digunakan ketika konten tambahan tidak perlu selalu terlihat tetapi harus mudah diakses pengguna.

Anatomi

Kategori

Panel Drawer (Desktop)

Panel Drawer muncul dari sisi kanan atau kiri layar pada tampilan desktop. Biasanya digunakan untuk menampilkan navigasi, detail data, atau form tambahan secara berdampingan dengan halaman utama.

Bottom Sheet (Mobile)

Bottom Sheet Drawer muncul dari bagian bawah layar pada tampilan mobile.

Cocok digunakan untuk tindakan cepat, menampilkan ringkasan informasi, atau pilihan menu tambahan dengan fokus penuh pada interaksi pengguna.

Ukuran

Panel

Lebar minimum: 420px — cukup untuk menampilkan daftar item atau menu dengan teks dan ikon.

Lebar maksimum: 520px — agar panel tetap terasa sebagai elemen pendukung tanpa mendominasi layar.

Bottom Sheet

Minimum height: 280-320px (±40-45% dari tinggi layar). Ideal untuk tindakan cepat seperti form singkat, pilihan, atau notifikasi tambahan.

Maximum height: 90% dari tinggi layar. Cocok untuk konten detail yang masih memerlukan konteks di latar belakang.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan satu bottom sheet untuk setiap tindakan atau konteks interaksi. Hal ini membantu menjaga fokus pengguna dan mencegah tampilan menjadi tumpang tindih.

❌ Dihindari

Hindari membuka bottom sheet baru dari dalam bottom sheet lain. Tindakan ini dapat membuat bingung pengguna dan mengganggu alur navigasi.

✅ Disarankan

Sesuaikan ukuran panel atau drawer dengan panjang dan kompleksitas konten di dalamnya. Pastikan tampilan tetap proporsional dan mudah dipindai oleh pengguna.

❌ Dihindari

Hindari membuat drawer atau panel yang terlalu lebar hingga menutupi hampir seluruh layar. Hal ini dapat menghilangkan konteks halaman utama dan menurunkan efisiensi navigasi.

Penerapan

Panel Drawer (Desktop)

Pada tampilan desktop, Panel Drawer digunakan untuk menampilkan informasi tambahan atau form pengaturan tanpa meninggalkan halaman utama.

Pada tampilan desktop, Panel Drawer digunakan untuk menampilkan informasi tambahan atau form pengaturan tanpa meninggalkan halaman utama. Contoh pada gambar menunjukkan drawer yang digunakan untuk mengubah kredensial aplikasi di halaman Client Management.

Bottom Sheet (Mobile)

Pada tampilan mobile, Bottom Sheet digunakan untuk menampilkan menu atau tindakan tambahan dengan tetap menjaga fokus pada konteks utama. Contoh pada gambar memperlihatkan bottom sheet yang menampilkan menu Manajemen Talenta, seperti Predikat, Profil, dan Anggota Tim.

Spesifikasi