Generator Menu Plus UI untuk WordPress

Menu Plus UI memiliki karakter yang berbeda dari menu WordPress standar: ada menu utama, menu mobile/drawer, link dokumentasi di bar sekunder, ikon, badge, dan beberapa tombol utilitas di sisi kanan header. Pada WordPress, semua ini dapat dikelola tanpa mengedit XML Blogger.

Mengelola menu dari dashboard

1. Buka Appearance → Menus atau editor Navigation sesuai versi WordPress Anda.
2. Pilih lokasi Primary untuk menu desktop.
3. Tambahkan Page, Post, Category, atau Custom Link.
4. Susun item dengan drag-and-drop.
5. Simpan menu dan cek tampilan desktop serta mobile.

Menu utama pada theme

Secara teknis theme memanggil menu WordPress menggunakan wp_nav_menu().

wp_nav_menu(array(
    'theme_location' => 'primary',
    'container'      => false,
    'fallback_cb'    => false,
));

Class item bergaya Plus UI

Untuk menambahkan CSS Class pada item menu, aktifkan opsi CSS Classes dari Screen Options pada halaman menu WordPress.

Dropdown

WordPress membuat submenu otomatis ketika sebuah item digeser sedikit ke kanan di bawah item induk.

<li class="menu-item menu-item-has-children">
  <a href="#">Dokumentasi</a>
  <ul class="sub-menu">
    <li><a href="/instalasi/">Instalasi</a></li>
    <li><a href="/komponen/">Komponen UI</a></li>
  </ul>
</li>

Ikon SVG

Plus UI WP membawa library SVG dari file docs/svg-icons.json. Theme dapat memanggil ikon satu per satu dengan helper pui_icon().

<span class="menu-icon">
  <?php pui_icon('home'); ?>
</span>

Badge Baru dan Gratis

Untuk link promosi, Anda dapat menambahkan class khusus pada item menu dan membuat badge melalui CSS.

.menu-item.new > a::after{
  content:'Baru';
  margin-inline-start:6px;
  padding:2px 6px;
  border-radius:20px;
  font-size:10px;
  background:var(--linkB);
  color:#fff;
}

Menu mobile

Menu mobile memakai lokasi menu yang sama atau lokasi Mobile bila diatur. Jangan membuat dua set menu dengan isi berbeda tanpa alasan karena akan menyulitkan maintenance.

Ikon utilitas kanan header

Bagian kanan header tidak berasal dari menu WordPress biasa. Theme menampilkan:

• Search.
• Profil.
• Bookmark.
• Translate.
• Appearance (Light, Dark, System, Theme).

Fitur profil, bookmark, dan translate dapat diaktifkan atau dinonaktifkan melalui Customizer.

Praktik aksesibilitas

• Gunakan teks link yang jelas, jangan semua item hanya berupa ikon.
• Untuk tombol ikon, gunakan aria-label.
• Pastikan submenu dapat dioperasikan dengan keyboard.
• Jangan memakai terlalu banyak item tingkat pertama.

<button type="button" aria-label="Buka pencarian">
  <svg aria-hidden="true">...</svg>
</button>

Menambahkan ikon ke item menu

WordPress Core tidak memiliki field ikon pada setiap menu item. Ada tiga pendekatan: gunakan class CSS pada item, gunakan plugin menu icon, atau tambahkan field khusus melalui hook. Untuk theme ringan, class CSS dan SVG bawaan biasanya cukup.

menu-icon-home
menu-icon-docs
menu-icon-download

Class tersebut dapat dipetakan ke pseudo-element atau helper SVG pada custom walker bila nantinya diperlukan.

Custom Walker: kapan digunakan?

Custom Walker berguna jika markup harus sangat spesifik, misalnya setiap item memerlukan wrapper ikon, badge dinamis, atau tombol expand terpisah. Jangan membuat walker hanya untuk mengganti warna karena CSS sudah cukup.

class PUI_Menu_Walker extends Walker_Nav_Menu {
    public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $output .= '<li class="pui-menu-item">';
        $output .= '<a href="' . esc_url($item->url) . '">';
        $output .= esc_html($item->title);
        $output .= '</a>';
    }
}

Menu kategori

Untuk portal atau blog dengan banyak topik, kategori dapat dimasukkan langsung sebagai item menu. Keuntungannya adalah URL tetap mengikuti taxonomy WordPress dan jumlah artikel dapat bertambah tanpa mengubah link.

Menu dokumentasi

Dokumentasi biasanya lebih nyaman bila item disusun berdasarkan urutan belajar: Instalasi → Pengaturan Dasar → Tampilan → Navigasi → Komponen → Optimasi. Jangan menyusun berdasarkan tanggal posting jika pembaca membutuhkan alur tutorial.

Menjaga header agar tidak overflow

Masalah umum ketika meniru Plus UI adalah label menu keluar dari container. Solusinya bukan mengecilkan semua font secara ekstrem, tetapi mengontrol jumlah item utama, gap, dan perilaku overflow.

.pui-secondary-nav{
  display:flex;
  gap:0;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.pui-secondary-nav::-webkit-scrollbar{display:none}

Urutan menu mobile

Pada mobile, prioritaskan Home, Dokumentasi, kategori utama, dan Contact. Utility actions seperti Search atau Appearance sebaiknya tetap berada di header agar tidak diduplikasi terlalu banyak di drawer.

Link eksternal pada menu

Jika menu menuju Telegram, GitHub, atau situs lain, pertimbangkan membuka di tab baru dan menambahkan rel yang sesuai. WordPress menyediakan opsi Link Target pada Screen Options.

Menonaktifkan item demo

Importer membuat beberapa link awal agar header tidak kosong. Setelah setup, ganti semua URL # dengan halaman nyata atau hapus item tersebut. Link kosong dapat membuat pengalaman pengguna terasa belum selesai.

Troubleshooting menu