Header

Header merupakan elemen navigasi utama yang ditempatkan di bagian atas halaman. Komponen ini berfungsi sebagai identitas visual dan titik awal orientasi pengguna, memuat logo, tautan navigasi, dan elemen interaktif seperti tombol aksi (CTA), pemilihan bahasa, serta pengaturan akun.

Desain header harus tetap konsisten, responsif, dan mudah dikenali agar membantu pengguna menavigasi halaman tanpa kehilangan konteks.

Penggunaan

Gunakan Header untuk menampilkan elemen navigasi utama dan identitas produk atau organisasi.

Pola ini cocok digunakan pada seluruh halaman utama situs, halaman produk, maupun portal layanan agar pengguna dapat berpindah antarbagian dengan cepat dan efisien.

Pastikan elemen di dalam header seperti logo, menu, dan tombol aksi ditempatkan dengan hierarki yang jelas agar tampilan tetap rapi dan mudah digunakan di berbagai ukuran layar.

Anatomi

Kategori

Basic Header (Rata kiri)

Menampilkan logo di sisi kiri dan navigasi di sisi kanan.
Cocok digunakan untuk aplikasi dengan struktur konten padat seperti portal informasi atau sistem manajemen.
Memberikan kesan formal dan profesional.

Basic Header (Rata tengah)

Menampilkan logo di tengah dan navigasi di bawah atau di kedua sisinya.
Umumnya digunakan pada situs promosi, blog, atau landing page.
Memberikan tampilan yang seimbang dan elegan.

Floating Header

Menampilkan navigasi yang melayang (floating) di bagian atas halaman.
Digunakan pada halaman promosi atau landing page agar navigasi tetap terlihat saat pengguna menggulir layar.
Menciptakan kesan modern dan ringan.

Bottom Header

Menempatkan navigasi di bagian bawah layar, terutama untuk tampilan mobile.
Umumnya hanya berisi menu utama seperti Home, About, Services, atau Contact agar tetap ringkas dan mudah dijangkau dengan ibu jari.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan jumlah menu yang seimbang (idealnya 3-5 item utama).

❌ Dihindari

Jangan menampilkan terlalu banyak tautan atau submenu dalam satu baris.

✅ Disarankan

Pastikan logo dan CTA memiliki kontras yang cukup agar mudah dikenali.

❌ Dihindari

Hindari menempatkan CTA yang terlalu besar di dalam header karena dapat mengganggu hierarki visual.

Penerapan

Landing Page

Contoh penerapan Header dapat dilihat pada halaman produk atau landing page utama.

Header ditempatkan di bagian atas dengan posisi tetap (sticky) dan berisi elemen identitas brand serta tautan utama seperti "Home", "Product", "Tutorial", dan "FAQs".

Desain ini membantu memperkuat identitas visual sekaligus memudahkan pengguna berpindah halaman.

Spesifikasi