Tab Menu

Komponen ini mengelompokkan konten ke dalam beberapa bagian yang saling berkaitan, sehingga pengguna bisa berpindah antar bagian tanpa meninggalkan halaman. Komponen ini membantu menjaga konteks, menyederhanakan navigasi, dan mengurangi beban kognitif pengguna.

Penggunaan

Gunakan Tab Menu untuk menata beberapa bagian informasi dalam satu halaman agar tetap terstruktur dan mudah dipahami. Komponen ini memudahkan pengguna berpindah antar konten dengan cepat tanpa perlu memuat ulang halaman. Baiknya digunakan ketika halaman memiliki beberapa bagian yang masih relevan satu sama lain, dan setiap tab berisi konten yang tidak terlalu panjang atau kompleks.

Varian

Horizontal Tab

•Digunakan ketika ruang horizontal cukup luas, seperti pada tampilan desktop atau tablet.
•Cocok untuk halaman dengan konten singkat di setiap tab.
•Memberikan pengalaman navigasi yang familiar dan mudah dipindai dari kiri ke kanan. Contoh penggunaan: halaman profil
•Contoh penggunaan: halaman profil pengguna, pengaturan, atau manajemen data.

Vertical Tab

•Digunakan ketika jumlah tab banyak atau label tab panjang, biasanya pada tampilan desktop dengan layout dua kolom.
•Cocok untuk form multi-section atau panel konfigurasi.
•Tab diletakkan di sisi kiri, konten di sisi kanan.
•Membantu menjaga keterbacaan ketika label panjang.

Cara Penggunaan yang Disarankan

✅ Disarankan

Pastikan setiap label tab menggunakan kata kunci yang familiar dan langsung mewakili konten di dalamnya.

❌ Dihindari

Jangan gunakan label tab yang terlalu panjang karena dapat mempersulit navigasi dan membuat tampilan berantakan.

✅ Disarankan

Ikuti batas maksimum 32 karakter untuk setiap label tab.

❌ Dihindari

Hindari label yang melewati dua baris atau melebihi batas karakter yang disarankan.

Penerapan

Navigasi Informasi di Satu Halaman

Gunakan Tab Menu pada halaman yang memiliki beberapa bagian informasi berbeda namun masih berkaitan, seperti di halaman Detail Pengguna untuk menampilkan menu seperti ringkasan profil, pengaturan akun, hingga riwayat aktivitas.

Spesifikasi