Tut Wuri HandayaniSeragam Design System

Menu

Header

Header atau Header Bar adalah komponen antarmuka di bagian atas layar yang berfungsi sebagai navigasi utama atau penyedia informasi penting. Komponen ini mencakup elemen seperti judul halaman, ikon navigasi, dan tombol aksi utama (seperti pencarian atau menu).

Anatomi

Header bar

Jenis dan variasi

Small Header

Ukuran Header yang ringkas, cocok untuk layar dengan ruang terbatas atau tampilan minimalis.

Header bar

Large Header

Ukuran Header yang lebih tinggi, ideal untuk menampilkan informasi tambahan atau memberikan kesan visual yang lebih menonjol.

Large header

Transparent Header

Ukuran Header yang ringkas dengan background transparan. Transparent header bar

Variasi

Terdapat 4 states untuk Text field, yaitu Default, Text action active, 1 icon action active, 2 icons action active, dan >2 icons active. Berikut contoh gambar dan penjelasannya: Variant header bar

Default

Tampilan Header tanpa interaksi atau aksi aktif. Biasanya hanya menampilkan elemen utama seperti judul dan navigasi.

Text Action Active

Tampilan Header dengan interaksi menu singkat.

1 Icon Action Active

Header dengan satu ikon seperti ikon pencarian, notifikasi, atau menu tertentu. 2 Icons Action Active

Header dengan dua ikon seperti ikon pencarian, notifikasi, atau menu tertentu.

>2 Icons Active

Header dengan satu ikon seperti ikon pencarian, notifikasi, atau menu tertentu. Tata letak harus dirancang agar tetap jelas dan tidak membingungkan, dengan mempertahankan jarak dan hierarki visual yang baik.