Cara menambahkan menu navigasi dropdown di WordPress merupakan salah satu langkah penting untuk meningkatkan tampilan dan pengalaman pengguna di situs kamu. Dengan fitur dropdown, menu utama bisa menampilkan sub-menu secara rapi tanpa membuat halaman terlihat penuh atau berantakan.
Apa Itu Menu Navigasi Dropdown?
Menu dropdown adalah sistem navigasi yang memungkinkan munculnya daftar submenu saat pengguna mengarahkan kursor atau mengklik menu utama. Fitur ini sangat membantu dalam mengorganisir banyak halaman agar tetap mudah diakses.
Sebagai contoh, pada menu “Tentang Kami”, kamu bisa menambahkan submenu seperti “Visi dan Misi”, “Tim Kami”, hingga “Kontak” agar lebih terstruktur.
🔹 1. Membuat Menu Utama di WordPress
Langkah awal yang perlu dilakukan adalah membuat menu utama sebagai dasar navigasi website.
- Masuk ke Dashboard WordPress.
- Pilih menu Tampilan → Menu.
- Klik Buat Menu Baru lalu beri nama, misalnya “Menu Utama”.
- Pilih halaman, postingan, atau custom link yang ingin ditampilkan.
- Klik Tambahkan ke Menu.
- Atur posisi menu dengan fitur drag and drop.
- Centang opsi “Tampilkan di lokasi utama” lalu klik Simpan Menu.
🔹 2. Menambahkan Submenu (Dropdown)
Untuk membuat dropdown di WordPress, kamu sebenarnya tidak perlu coding tambahan karena fitur ini sudah tersedia secara default. Namun, memahami cara kerjanya akan membantu kamu membuat menu yang lebih rapi dan profesional.
Dropdown bekerja dengan sistem parent-child (induk dan turunan). Menu utama disebut parent, sedangkan menu di bawahnya disebut submenu.
- Buka menu Tampilan → Menu di dashboard WordPress.
- Pilih menu yang ingin kamu edit.
- Tambahkan item baru yang akan dijadikan submenu (bisa halaman, kategori, atau custom link).
- Geser (drag & drop) item tersebut sedikit ke kanan di bawah menu induk.
- Pastikan posisinya menjorok (indent), ini menandakan item menjadi submenu.
- Klik Simpan Menu untuk menerapkan perubahan.
Setelah disimpan, menu tersebut akan otomatis tampil sebagai dropdown di bagian front-end website kamu.
🎨 Menyesuaikan Tampilan Dropdown dengan CSS
Jika tampilan dropdown kurang rapi atau ingin terlihat lebih modern, kamu bisa menambahkan CSS berikut melalui Tampilan → Sesuaikan → CSS Tambahan:
/* Styling dasar dropdown */
.main-navigation ul ul {
display: none;
position: absolute;
background: #ffffff;
padding: 10px 0;
min-width: 200px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* Tampilkan saat hover */
.main-navigation ul li:hover > ul {
display: block;
}
/* Styling item submenu */
.main-navigation ul ul li {
display: block;
}
.main-navigation ul ul li a {
padding: 10px 15px;
display: block;
color: #333;
}
.main-navigation ul ul li a:hover {
background: #f5f5f5;
}
📱 Tips Agar Dropdown Lebih Responsif
Beberapa tema tidak otomatis mendukung dropdown yang optimal di mobile. Kamu bisa menambahkan sedikit JavaScript agar menu bisa diklik (bukan hanya hover):
document.querySelectorAll('.menu-item-has-children > a').forEach(function(menu) {
menu.addEventListener('click', function(e) {
let submenu = this.nextElementSibling;
if (submenu) {
e.preventDefault();
submenu.classList.toggle('active');
}
});
});
Tambahkan juga CSS kecil berikut:
.main-navigation ul ul {
display: none;
}
.main-navigation ul ul.active {
display: block;
}
- Gunakan maksimal 5–7 menu utama agar navigasi tetap nyaman.
- Hindari terlalu banyak submenu agar tidak membingungkan pengunjung.
- Pastikan setiap menu memiliki tujuan yang jelas.
🔹 3. Menyesuaikan Tampilan Dropdown
Tampilan menu dropdown biasanya mengikuti desain tema WordPress yang kamu gunakan. Banyak tema populer seperti Astra, GeneratePress, dan OceanWP sudah menyediakan fitur dropdown secara otomatis tanpa perlu pengaturan tambahan.
Jika dropdown belum muncul dengan benar, kamu bisa melakukan pengecekan berikut:
- Pastikan menu sudah ditempatkan di lokasi navigasi utama (Primary Menu).
- Periksa pengaturan tema atau CSS yang mungkin mempengaruhi tampilan submenu.
- Gunakan page builder seperti Elementor jika ingin desain dropdown lebih modern.
🔹 4. Alternatif: Menambahkan Menu Dropdown via Plugin
Jika fitur bawaan tema kurang memadai, kamu bisa menggunakan plugin untuk membuat menu dropdown yang lebih fleksibel dan interaktif.
- Max Mega Menu — cocok untuk membuat menu kompleks dengan banyak kolom.
- WP Mega Menu — mendukung tampilan visual dengan gambar dan ikon.
- Responsive Menu — membantu optimasi menu agar lebih ramah di perangkat mobile.
⚙️ Cara Memasang Plugin Menu di WordPress
Ikuti langkah-langkah berikut untuk menginstal dan mengaktifkan plugin menu dropdown di WordPress:
- Masuk ke dashboard WordPress kamu.
- Pilih menu Plugin → Tambah Baru.
- Ketik nama plugin, misalnya Max Mega Menu di kolom pencarian.
- Klik tombol Install Now, lalu tunggu proses selesai.
- Setelah itu, klik Activate untuk mengaktifkan plugin.
- Masuk ke menu pengaturan plugin, lalu sesuaikan tampilan dropdown sesuai kebutuhan.
Setelah plugin aktif, kamu bisa langsung menghubungkannya dengan menu navigasi di Appearance → Menus untuk mulai membuat dropdown yang lebih menarik.
🧠 Kesimpulan
Menambahkan menu navigasi dropdown di WordPress tidak hanya membuat tampilan website lebih rapi, tetapi juga meningkatkan kemudahan navigasi bagi pengunjung. Kamu bisa memanfaatkan fitur bawaan WordPress atau menggunakan plugin tambahan sesuai kebutuhan.
💬 Bagikan Pendapatmu!
Sudah mencoba membuat menu dropdown di WordPress? Bagikan pengalaman kamu di kolom komentar agar bisa saling membantu.
Terima kasih sudah membaca di TipstechPraktis. Nantikan panduan berikutnya tentang cara membuat footer WordPress tanpa plugin. 🙌
❓ Pertanyaan Umum
Apa kegunaan menu dropdown di WordPress?
Menu dropdown membantu menampilkan submenu secara rapi sehingga pengunjung lebih mudah menemukan halaman yang dibutuhkan.
Apakah bisa membuat dropdown tanpa plugin?
Bisa. Kamu hanya perlu menggeser item menu ke kanan di bawah menu utama untuk menjadikannya submenu.
Kenapa menu dropdown tidak muncul?
Hal ini biasanya disebabkan menu belum ditempatkan di lokasi utama atau tema belum mendukung dropdown secara optimal.
