Anatomi
Jenis dan variasi
Fixed Tabs
Fixed Tabs menampilkan semua tab pada satu layar, dengan lebar masing-masing tab yang tetap (fixed).
Scrollable Tabs
Scrollable Tabs ditampilkan tanpa lebar tetap dan memungkinkan sebagian Tabs terlihat terpotong untuk dapat digeser atau digulir (scroll) oleh pengguna. Gunakan jenis Tabs ini bila jumlah Tabs atau ukuran tetap setiap Tabs yang disejajarkan melebihi lebar minimum layar.
States
Terdapat 5 states untuk Tabs, yakni Default, Focused, Hovered, Pressed, dan Disabled. Berikut contoh gambar dan penjelasannya:
- Default: Tampilan standar saat pengguna belum melakukan aksi apapun.
- Focused: Tampilan Tabs saat keyboard fokus pada sebuah Tabs.
- Hovered: Tampilan Tabs saat mouse hover pada sebuah Tabs.
- Pressed: Tabs terpilih menunjukkan halaman yang sedang dilihat pengguna.
- Disabled: Tabs tidak dapat dipilih pengguna.
Behaviors
Penempatan
Secara penempatan, Tabs dapat digabungkan dengan komponen seperti Header atau disematkan di suatu bagian.
Panduan penggunaan
Tabs adalah elemen interaktif yang membantu pengguna untuk mempelajari lebih dari 1 kategori informasi di dalam satu halaman.
Tidak dapat mengaktifkan lebih dari 1 tab sekaligus
Bila ada kebutuhan ini, dapat refer ke komponen Filter.
Tombol Tabs tidak mengarahkan pengguna ke halaman lain
Tabs bertujuan untuk mengumpulkan beberapa kategori informasi di bawah satu induk konteks. Sehingga untuk mempermudah pencernaan informasi, peralihan dari satu Tabs ke lainnya tidak boleh berpindah halaman.
Terlalu banyak Tabs
Bila terdapat banyak Tabs yang melebihi batas tampilan layar secara horizontal, gunakan variasi Scrollable Tabs. Tidak diperbolehkan untuk menggunakan truncate untuk membantu keterbacaan pengguna.
Tabs yang bersarang
Hindari menggunakan beberapa tingkat Tabs. Sebagai gantinya, pertimbangkan untuk menggunakan komponen organisasi lain seperti side navigation atau Accordion sesuai dengan kasus dan kebutuhannya. Tabs yang bersarang dapat diterima jika ada tingkat pemisahan yang tinggi antara dua pengalaman Tabs, atau jika tujuan penggunaannya berbeda. Jangan mengorbankan kejelasan hierarki dengan menggunakan variasi atau orientasi Tabs yang sama.
Responsif
Mobile 768 px
- Width: 100% viewport width.
- Scroll:
- Jika jumlah tab > 3–4, gunakan horizontal scroll dengan indikator overflow (gradient fade atau chevron).
- Pastikan tiap tab tetap dapat dijangkau dengan swipe.
Tablet 769 - 1024px
- Width: 80–90% dari viewport width.
- Layout:
- Tabs rata kiri atau center (opsional).
- Setiap tab berjarak cukup lega (16–20px antar-tab).
- Jika jumlah tab banyak → gunakan scroll horizontal dengan indikator.
Desktop 1025 - 1440px
- Width: 60–70% viewport width (max-width ±960px).
- Layout:
- Tabs ditampilkan penuh dalam satu baris (tidak perlu scroll jika ≤6 tab).
- Alignment default: kiri. Untuk use case tertentu bisa center.
- Jarak antar-tab lebih longgar (24px).
Large Desktop 1440+
- Width: 40–50% viewport width (max-width ±1280px).
- Layout:
- Tabs lebih tersebar (spasi antar-tab 32px atau lebih).
- Bisa menggunakan justified tabs (dibagi rata sepanjang bar) bila jumlah tab sedikit.
- Tetap dalam satu baris, tanpa scroll.
Panduan penulisan
Nama Tabs maksimal 3 kata tanpa truncate
Dengan tujuan mempermudah keterbacaan dan navigasi pengguna, penulisan nama Tabs yang disarankan tidak melebihi 3 kata. Penulisan yang terlalu panjang akan mengurangi visibilitas dari Tabs lain yang tersedia.
Utamakan kata yang paling penting
Untuk mencapai penggunaan 3 kata maksimal, pertimbangkan dan pilih kata yang paling penting/mewakili.
Misalnya, untuk kolom yang memuat nama-nama kontributor Perangkat Ajar, kita bisa memilih menggunakan kata “Kontributor” saja (alih-alih “Nama kontributor”).
Gunakan sentence case
Penggunaan Sentence case atau hanya huruf pertama di awal kalimat yang ditulis kapital akan menyederhanakan tampilan kata-kata dalam satu baris dan meningkatkan keterbacaan. Pembaca akan lebih mudah membedakan satu Tabs dengan lainnya. Hindari tanda titik “.” di akhir kalimat.