Kami pernah bekerja dengan tim kecil yang memiliki sebuah website sederhana namun berantakan. Mereka kehilangan waktu saat mencari halaman penting. Dari situ kami paham—struktur navigasi memengaruhi pengalaman dan hasil bisnis.
Dalam panduan ini, kita akan menunjukkan solusi praktis. Sub menu membantu menghemat ruang, merapikan tampilan, dan mempercepat akses ke halaman spesifik. Kami jelaskan perbedaan antara tema klasik dan block theme, serta tipe item yang bisa digunakan—halaman, artikel, kategori, atau tautan.
Kami juga tunjukkan prinsip drag-and-drop untuk menata hirarki menu utama dan sub menu. Terakhir, kami bahas pengaturan lokasi tampilan dan opsi kustomisasi seperti CSS Classes untuk menyelaraskan tampilan dengan merek.
Poin Kunci
- Sub menu memperbaiki navigasi dan menghemat ruang tampilan.
- Pilih alur kerja sesuai tema: Appearance → Menus atau Site Editor.
- Item menu bisa berupa halaman, posting, kategori, atau custom link.
- Atur hirarki dengan drag-and-drop untuk membuat struktur yang rapi.
- Tentukan lokasi tampilan agar menu konsisten di seluruh website.
- Gunakan CSS Classes dan Additional CSS untuk penyesuaian lanjutan.
Pengenalan Sub Menu WordPress, Manfaat, dan Performa Navigasi
Hirarki tautan yang logis mempercepat akses ke konten penting di situs. Dropdown yang menempatkan link turunan di bawah menu utama membuat header lebih ringkas dan fokus.
Struktur berjenjang memungkinkan beberapa level kedalaman — semakin ke kanan, semakin dalam tingkatnya. Hasilnya: halaman terkait terkelompok rapi dan kebisingan visual di tampilan header berkurang.
Kami lihat manfaat bisnis langsung: navigasi lebih cepat, estetika konsisten, dan aksesibilitas meningkat. Penamaan yang jelas membantu pembaca layar dan semua pengguna menemukan informasi dengan mudah.
Dampak pada performa dan SEO
Struktur link yang teratur memperjelas hubungan antar halaman untuk crawler — ini memberi sinyal SEO positif. Namun, dropdown yang berat dapat menurunkan kecepatan; hindari skrip dan gambar besar.
- Gunakan desain ringan dan optimalkan pemanggilan aset.
- Batasi kedalaman agar pengambilan keputusan pengunjung tetap cepat.
- Uji kecepatan setelah perubahan untuk menjaga performa website.
Untuk panduan langkah praktis, lihat panduan langkah praktis yang menjelaskan pengaturan dan struktur secara rinci.
Persiapan: Memahami Perbedaan Classic Theme vs Block Theme (FSE)
Sebelum menata navigasi, penting memahami perbedaan antarmuka tema klasik dan block theme.
Kita menemukan dua alur kerja utama di dashboard. Tema klasik menggunakan Appearance → Menus dengan tab Edit Menus yang menampilkan Menu Name, Menu Structure, Add Menu Items, dan Display Location.
Block theme (FSE) seperti Twenty Twenty-Two mengandalkan Site Editor dan blok Navigation. Di sana Anda dapat drag-and-drop langsung pada kanvas, menambahkan submenu, serta mengatur label, URL, dan deskripsi — semua dalam tampilan editor yang lebih visual.
- Kami sarankan verifikasi tema aktif di dashboard agar memilih langkah kerja yang tepat.
- Kedua pendekatan mendukung halaman, kategori, dan tautan khusus—fitur dasarnya setara, hanya pengalaman pengeditan berbeda.
- Pilih tema klasik untuk konfigurasi cepat; pilih FSE untuk fleksibilitas desain penuh situs.
Catatan praktis: lokasi penempatan menu akan langsung memengaruhi visibilitas navigasi di seluruh website. Pastikan uji tampilan pada beberapa page setelah perubahan.
cara membuat sub menu di wordpress secara manual di Appearance → Menus
Berikut panduan ringkas untuk menyusun struktur navigasi secara langsung dari dashboard. Kita mulai dengan menyiapkan konten penting—buka Pages → Add New, buat halaman inti, lalu klik Publish agar halaman siap dipilih sebagai item.
Kemudian buka Appearance → Menus. Di tab Edit Menus, isi kolom Menu Name dan pilih Create Menu. Area Menu Structure akan aktif sehingga Anda bisa menata item.
Pada bagian Add Menu Items, centang halaman, posting, atau kategori, atau masukkan Custom Link lalu tekan Add to Menu. Susun urutan dengan drag-and-drop—geser item sedikit ke kanan untuk menjadikannya turunannya.
Setelah selesai, klik Save Menu dan tentukan Display Location agar struktur tampil konsisten di seluruh website. Untuk styling lanjut, aktifkan CSS Classes via Screen Options dan tambahkan aturan di Additional CSS.
- Siapkan halaman lewat Pages → Add New.
- Buka Appearance → Menus, isi Menu Name, lalu Create Menu.
- Gunakan Add Menu Items dan drag ke kanan untuk level turunannya.
- Klik Save Menu dan atur Display Location.
Membuat Sub Menu dengan Site Editor (Block Theme/FSE)
Site Editor pada tema blok mengubah proses penataan navigasi menjadi lebih intuitif. Kita bekerja langsung di kanvas, sehingga perubahan terlihat seketika dan konsistensi tampilan lebih mudah dijaga.
Menambahkan blok Navigation dan pengaturan dasar
Kami mulai dengan membuka Appearance → Editor. Tambahkan blok Navigation dari inserter (+) lalu tempatkan pada template atau header.
Blok ini adalah fitur utama untuk mengatur nama menu dan posisi item secara visual. Pengaturan dasar meliputi pemilihan lokasi, gaya, dan tata letak agar selaras dengan brand.
Menambahkan link submenu dan drag ke tingkat lebih rendah
Untuk membuat sub menu, klik tiga titik pada item induk dan pilih “Tambahkan link submenu” atau seret item sedikit ke kanan untuk mengindentasikan.
Gestur drag-and-drop memudahkan pemindahan item antar level — tarik ke kanan untuk menurunkan, tarik ke kiri untuk menaikkan kembali.
Menyetel label, URL, deskripsi, dan urutan item
Kami selalu menyetel label yang singkat dan URL yang valid. Tambahkan deskripsi jika perlu untuk konteks halaman atau page tertentu.
Urutkan item dari kategori umum ke halaman detail agar alur baca pengunjung logis. Terakhir, tinjau pratinjau responsif dan simpan perubahan secara berkala.
- Kendalikan struktur langsung di kanvas untuk kecepatan iterasi.
- Periksa setiap link agar tidak ada dead link sebelum publikasi.
- Uji tampilan pada layar kecil untuk memastikan sub tetap mudah diakses.
Membuat Drop-Down dengan Plugin Max Mega Menu
Max Mega Menu memberi kontrol lanjutan untuk mengelola dropdown besar tanpa mengubah alur kerja tim.
Setelah instal dan aktifkan plugin, buka Mega Menu → Menu Locations. Centang Enable Max Mega Menu for this menu location?, pilih event trigger (hover atau click) dan atur animasi untuk desktop serta mobile. Klik Save Changes untuk menerapkan setelan.
Mengatur tampilan melalui Menu Themes
Masuk ke tab Menu Themes untuk menyelaraskan typography, spacing, warna, dan ukuran panel. Sesuaikan tema agar mengikuti tampilan tema aktif—plugin ini mengikuti gaya default sehingga integrasi cepat.
Menambah item dan menyimpan konfigurasi
Kelola daftar item melalui Appearance → Menus seperti biasa. Tambahkan halaman, kategori, atau custom link, lalu susun urutan untuk membentuk dropdown atau mega panel. Jangan lupa tekan Save Menu setelah perubahan.
“Plugin ini ideal untuk struktur besar — multi-kolom, kontrol styling, dan opsi responsif.”
- Kami aktifkan Max Mega Menu pada lokasi yang diinginkan untuk kontrol dropdown multi-kolom.
- Kami pilih trigger dan animasi yang halus untuk menjaga pengalaman pengguna.
- Kami selaraskan tampilan lewat Menu Themes agar konsisten dengan brand.
Terakhir, tinjau performa: batasi ikon atau gambar berat, dan simpan perubahan secara bertahap. Untuk gambaran arsitektur hosting dan performa website, lihat diagram hosting sebagai referensi infrastruktur.
Tips Optimalisasi: Struktur, Aksesibilitas, Tampilan, dan Kecepatan
Struktur navigasi yang ringkas membantu pengunjung menemukan isi penting dengan cepat. Kita fokus pada solusi praktis—mengurangi kebingungan dan menjaga performa website.
Batasi kedalaman dan jumlah item
Kita menyarankan struktur sederhana: maksimal dua sampai tiga level dan tidak terlalu banyak item per panel. Ini menjaga proses penemuan informasi tetap cepat dan intuitif.
Label jelas dan aksesibilitas
Gunakan label singkat, deskriptif, dan tambahkan atribut ARIA bila perlu. Fokus ring yang terlihat memudahkan navigasi keyboard dan pembaca layar.
Styling lewat CSS Classes
Aktifkan CSS Classes melalui Screen Options lalu gunakan Additional CSS untuk kustom visual tanpa merusak tema. Ini memberi kontrol atas tampilan menu utama dan sidebar sesuai kebutuhan.
Uji lintas perangkat dan pantau kecepatan
Selalu uji pada beberapa browser dan perangkat—perilaku hover vs tap berbeda. Gunakan staging environment sebelum live untuk aman.
Optimalkan skrip dan kompres aset agar kecepatan tetap tinggi; dropdown berat dapat menurunkan performa.
“Evaluasi struktur secara berkala — sesuaikan berdasarkan data pengguna untuk hasil yang konsisten.”
| Aspek | Rekomendasi | Manfaat |
|---|---|---|
| Struktur | 2–3 level, batasi item per kolom | Akses cepat, jelas |
| Aksesibilitas | Label ringkas + ARIA | Ramah pembaca layar |
| Performa | Optimasi skrip & gambar | Kecepatan loading terjaga |
Kesimpulan
Intinya, tata letak tautan yang jelas meningkatkan efisiensi jelajah pada setiap website.
Kami menegaskan tiga jalur implementasi: manual lewat Appearance → Menus, Site Editor pada block theme, atau plugin seperti Max Mega Menu. Pilih sesuai skala kebutuhan untuk hasil yang konsisten.
Pastikan beri nama menu dengan jelas, atur Display Location / Manage Locations, gunakan drag-and-drop untuk hirarki, lalu klik save menu setiap kali selesai.
Struktur rapi mempercepat akses ke kategori dan artikel — ini meningkatkan engagement dan memberi hasil nyata pada citra bisnis. Uji lintas perangkat dan iterasi berdasarkan data agar hasil nya terus membaik.
FAQ
Apa manfaat menambahkan submenu pada menu utama website?
Menambahkan submenu membuat navigasi lebih terstruktur dan hemat ruang — pengunjung lebih mudah menemukan konten terkait tanpa terpencar. Struktur yang baik juga membantu mesin pencari memahami hierarki halaman, selama kita tetap menjaga kedalaman yang wajar dan label yang jelas.
Bedanya tema klasik dan Block Theme (FSE) dalam pengaturan navigasi apa saja?
Tema klasik mengandalkan Appearance → Menus untuk membuat dan mengelola menu. Block Theme (FSE) menggunakan Site Editor dan blok Navigation sehingga pengaturan lebih visual dan terintegrasi dengan template. Pilihan tergantung kebutuhan kontrol dan fleksibilitas desain.
Langkah utama untuk menambahkan item dan menjadikannya submenu lewat Appearance → Menus?
Buat halaman atau posting terlebih dulu, kemudian ke Appearance → Menus, pilih menu atau buat baru, tambahkan item (pages, posts, categories, custom links), lalu drag item ke kanan sedikit untuk menjadikannya anak. Terakhir klik Save Menu dan tentukan Display Location agar tampil.
Bagaimana cara menambahkan link submenu di Site Editor pada Block Theme?
Tambahkan blok Navigation di Site Editor, pilih atau buat menu, lalu tambah link. Untuk menjadikan link sebagai submenu, geser posisi ke tingkat lebih rendah di struktur blok. Anda juga bisa menyetel label, URL, dan deskripsi langsung di panel blok.
Apakah plugin Max Mega Menu diperlukan untuk membuat dropdown yang kompleks?
Tidak selalu — dropdown dasar bisa dibuat lewat menu bawaan. Namun Max Mega Menu berguna bila ingin membuat megamenu kaya fitur, kontrol animasi, dan styling terperinci. Aktifkan plugin, atur lokasi menu, pilih trigger/animasi, lalu sesuaikan tema menu di tab Menu Themes.
Bagaimana memastikan submenu tetap cepat dan tidak memperlambat situs?
Jaga struktur sederhana — batasi kedalaman dan jumlah item. Hindari skrip berat pada menu, gunakan CSS yang efisien, dan uji performa setelah perubahan. Caching dan optimasi gambar juga membantu menjaga kecepatan.
Apa praktik terbaik untuk aksesibilitas pada submenu?
Gunakan label yang deskriptif, periksa fokus keyboard, dan tambahkan atribut ARIA bila perlu. Pastikan dropdown dapat dioperasikan tanpa mouse dan memiliki kontras warna yang cukup untuk pembaca dengan gangguan penglihatan.
Bisakah kita menambahkan class CSS khusus pada setiap item menu untuk styling?
Ya — aktifkan opsi CSS Classes di Screen Options pada halaman Menus. Setelah muncul, tambahkan class sesuai kebutuhan dan gunakan Additional CSS untuk gaya khusus tanpa mengubah file tema langsung.
Apa yang harus diuji setelah membuat submenu agar tampil konsisten?
Uji di berbagai perangkat dan browser, periksa fungsi keyboard, pastikan lokasi display benar, dan lihat apakah item tersembunyi atau terpotong pada layar kecil. Periksa juga tautan dan deskripsi agar pengguna mendapatkan informasi yang tepat.
Bagaimana mengelola menu agar sesuai kebutuhan bisnis dan perkembangan konten?
Rencanakan struktur berdasarkan prioritas halaman — produk, layanan, artikel penting. Batasi jumlah kategori utama, gunakan submenu untuk pengelompokan, dan tinjau menu secara berkala ketika konten berubah atau bertambah.
Comments are closed.