Cara Marketer Indonesia Pasang HTML popover di Next.js untuk Dropdown Mega-Menu, Pangkas 14 KB Floating UI dan Hilangkan Logika Z-Index Stacking di 2026

TL;DR: HTML popover adalah atribut native yang membuat dropdown mega-menu di Next.js bisa dipasang tanpa Floating UI atau Radix Popover. Tutorial ini memangkas 14 KB JavaScript per landing page, menghilangkan masalah z-index stacking, dan menjaga INP stabil di bawah 200 ms. Sudah stabil di Chrome, Safari, dan Firefox per Mei 2026.

Dalam beberapa proyek landing page terakhir yang Vito Atmo tangani untuk klien personal branding, satu pola muncul berulang: dropdown navigasi yang dibangun dengan Floating UI atau Radix Popover sering jadi 30 sampai 40 persen dari total bundle JavaScript halaman. Untuk landing page yang seharusnya ringan, ini berlebihan. Dan masalah klasik z-index, di mana dropdown tersembunyi di belakang section berikutnya, masih sering muncul meski sudah pakai React portal.

Per Mei 2026, ada cara yang lebih ringan: atribut HTML popover yang dipromosikan ke top layer browser secara otomatis. Tutorial ini memandu marketer Indonesia, termasuk yang belum dalam ke React, untuk memasang dropdown mega-menu di Next.js tanpa library tambahan.

Konteks: Kenapa Library Dropdown Jadi Mahal

Library populer untuk dropdown di React punya footprint yang tidak sepele:

Untuk landing page yang LCP-nya sudah ketat di bawah 2,5 detik, memangkas 14 KB JavaScript langsung berdampak ke metrik Core Web Vitals. Lebih penting lagi, popover native otomatis di-promote ke top layer browser, sehingga masalah z-index stacking yang biasa muncul di mega-menu dengan section sticky di bawahnya hilang tanpa workaround.

Framework Implementasi 4 Langkah

Langkah 1: Markup Dasar di Next.js

Buat komponen MegaMenu.tsx di components/atoms/. Markup ini cukup statis dan tidak butuh state:

export function MegaMenu() {
  return (
    <>
      <button popovertarget="main-menu" className="px-4 py-2">
        Menu
      </button>
      <div
        id="main-menu"
        popover="auto"
        className="rounded-xl border bg-white p-6 shadow-xl"
      >
        <a href="/artikel">Artikel</a>
        <a href="/glosarium">Glosarium</a>
        <a href="/layanan">Layanan</a>
      </div>
    </>
  );
}

Atribut popovertarget di button otomatis menghubungkan trigger dengan popover. Browser handle event toggle, light-dismiss (klik di luar), dan Escape key. Tidak butuh useState, useRef, atau event listener manual.

Langkah 2: Styling State :popover-open

Style berbeda untuk state terbuka pakai pseudo-class :popover-open. Tambahkan di globals.css:

[popover]:popover-open {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s, transform 0.2s;
}

[popover] {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
  transition-behavior: allow-discrete;
}

[popover]::backdrop {
  background: rgba(0, 0, 0, 0.1);
}

Properti transition-behavior: allow-discrete membuat animasi display: none ke display: block jadi mulus. Tanpa itu, popover muncul dengan jump tanpa transisi.

Langkah 3: Positioning Adaptif dengan position-try-fallbacks

Kombinasikan dengan CSS position-try-fallbacks untuk auto-flip saat popover dekat tepi viewport:

[popover] {
  position: absolute;
  position-anchor: --menu-anchor;
  position-try-fallbacks: flip-block, flip-inline;
}

button[popovertarget="main-menu"] {
  anchor-name: --menu-anchor;
}

Browser otomatis flip posisi popover saat mendekati tepi viewport, fitur yang biasanya butuh 200 sampai 400 baris JavaScript di library positioning.

Langkah 4: Progressive Enhancement Fallback

Untuk browser yang belum support penuh (Firefox versi lama, beberapa WebView Android), tambahkan fallback ringan:

'use client';
import { useEffect } from 'react';

export function PopoverPolyfill() {
  useEffect(() => {
    if (!HTMLElement.prototype.hasOwnProperty('popover')) {
      import('@oddbird/popover-polyfill');
    }
  }, []);
  return null;
}

Polyfill dimuat lazy hanya saat dibutuhkan, jadi browser modern tetap dapat zero overhead.

Studi Kasus: Mega-Menu Nalesha E-commerce Parfum

Saat membangun ulang navigasi Nalesha, klien e-commerce parfum yang Vito Atmo tangani, kami mengganti Radix Popover dengan HTML popover native. Hasilnya per akhir April 2026:

Angka spesifik proyek dan bervariasi tergantung kompleksitas mega-menu, ukuran image katalog, dan distribusi device pengunjung. Validasi pakai dokumentasi MDN Popover API untuk daftar lengkap pseudo-class dan event yang tersedia.

Pertanyaan Umum

Apakah HTML popover butuh React server component?

Tidak. popover adalah atribut HTML murni, jadi bisa dipakai di Server Component Next.js tanpa use client. Hanya polyfill yang butuh client-side.

Bagaimana dengan accessibility?

Browser otomatis menambah role dan ARIA state yang sesuai. Untuk mega-menu kompleks, tambahkan aria-haspopup="menu" di trigger dan struktur <nav> di dalam popover.

Apakah cocok untuk modal full-screen?

Tidak. Untuk modal yang menahan fokus dan butuh interaksi eksplisit, pakai <dialog> dengan showModal(). popover cocok untuk UI mengambang ringan: dropdown, tooltip, menu kontekstual.

Berapa lama biasanya migrasi dari library?

Untuk komponen dropdown sederhana, 1 sampai 2 jam per komponen. Untuk mega-menu kompleks dengan submenu bertingkat, 4 sampai 8 jam termasuk testing cross-browser.

Apakah perlu A/B test sebelum rollout?

Disarankan, terutama jika audiens punya distribusi browser lama yang signifikan. Set sample 10 persen dulu, monitor INP dan rage-click rate selama 7 hari.

Apa yang Bisa Anda Mulai Pekan Ini

Ambil 1 dropdown atau menu di landing page utama, ganti library positioning dengan HTML popover, dan ukur perubahan INP serta bundle size. Kalau hasilnya konsisten lebih ringan tanpa regresi UX, lanjutkan ke komponen-komponen UI mengambang lainnya. Migrasi inkremental seperti ini menjaga risiko rendah sambil tetap memetik manfaat browser modern.