Description

Replai Mega Menu upgrades the menus you already build in Appearance Menus into modern, responsive mega menus — no page builder required. Enable a mega panel on any top-level item and design its dropdown with columns, section headings, per-item icons and badges, a featured card and CTA buttons. On phones everything turns into a clean off-canvas drawer.

Because it is built on the native WordPress menu system, it stays compatible with your theme and multilingual plugins, and if you deactivate it your menus keep working as plain menus.

What you can build

Multi-column panels — organize a dropdown into columns with uppercase section headings, just like the big SaaS sites. Split into real columns automatically or add your own column breaks.
A real icon library — pick a per-item icon from a searchable library: Font Awesome (Solid & Brands, bundled locally), Dashicons and emoji. Set each icon’s color, and its size on an XS–XL scale.
Badges — add a small label such as “NEW” to any item, with a custom color.
Featured cards — a highlighted block with image, title, description and link inside the panel.
CTA buttons — turn a top-level item or a sub-item into a call-to-action button.
Responsive off-canvas drawer — below your chosen breakpoint the menu becomes a full-height mobile drawer with smooth accordions, a header with your logo, a sticky CTA area and a close button. Choose which side it opens from and hide your theme’s own toggler so there’s only one hamburger.
Fine-tuned styling with a live preview — accent, text and background colors, panel corner radius, dropdown arrow style (chevron / triangle / plus-minus / none), open-on-hover or open-on-click, and XS–XL scales for item spacing, font size and weight, icon size and sub-item title/subtitle — each with a separate mobile value. A live Desktop/Mobile preview reflects your changes as you type.
Works with your stack — built on native Appearance Menus, placeable with a shortcode, and available as an Elementor widget. No theme lock-in.

How to use it

Go to Appearance Menus and edit any item. You will see a new “Mega menu (Replai)” section with the options above.
Go to Appearance Replai Mega Menu to set colors, the mobile breakpoint and which theme menu locations the plugin should render as mega menus.
Or drop it anywhere with the shortcode [replai_menu location="primary"] (or [replai_menu menu="Main Menu"]).
Building your header with Elementor? Look for the Replai Mega Menu widget and pick a menu or theme location right in the editor.

Screenshots

A multi-column mega panel on the front end, with per-item icons and subtitles laid out across columns.

The settings screen (General tab): accent and text colours, panel corner radius, dropdown arrow and the live desktop preview. — A multi-column mega panel on the front end, with per-item icons and subtitles laid out across columns.

Installation

Upload the replai-mega-menu folder to /wp-content/plugins/, or install it from the WordPress plugin directory.
Activate the plugin.
Configure your items in Appearance Menus and the global styles in Appearance Replai Mega Menu.

FAQ

Does it work with my theme?: Yes. It renders the menus registered by your theme (theme locations) and can also be placed with a shortcode. It uses the native menu system, so no theme lock-in.
Is it responsive?: Yes. Below the breakpoint you set, the menu becomes an off-canvas drawer with expandable sections, a sticky area for CTA buttons and a close button. It is keyboard accessible and closes with Escape.
What happens if I deactivate it?: Your menus keep working as standard WordPress menus. The mega settings are stored as menu-item metadata and are simply ignored while the plugin is off.
Which icons can I use?: Each sub-item can use an icon from a searchable library: Font Awesome (Solid & Brands, bundled locally so nothing is loaded from a CDN), Dashicons, or an emoji. You can also set the icon color and its size on an XS–XL scale, with a separate value for mobile.
Does it work with Elementor?: Yes. Besides the native Appearance Menus integration and the shortcode, there is a “Replai Mega Menu” Elementor widget: drop it into any header or template and pick a menu or theme location right in the editor.
Does it call any external service?: No. The plugin runs entirely on your site and makes no external requests.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Replai Mega Menu – Multi-column dropdown menus” is open source software. The following people have contributed to this plugin.

REPLAI

Translate “Replai Mega Menu – Multi-column dropdown menus” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.0.42

Security/hardening: the per-item badge color is now validated as a hex color both when saved and when printed, instead of being stored as free text (plugin review feedback). The menu-item icon color already used the same validation.

1.0.41

Tested and compatible with WordPress 7.1.

1.0.40

Resubmission for review: confirmed no inline <script>/<style> anywhere (the settings tab script is enqueued from assets/js/admin-settings.js) and no bundled .po/.mo files (only the .pot template; translations via translate.wordpress.org).

1.0.39

Settings: the tab-switching script now loads from an enqueued file (assets/js/admin-settings.js) instead of an inline block.
Removed bundled .po/.mo translation files; translations are served from translate.wordpress.org.

1.0.38

Fix: in the mobile drawer, sub-item buttons now truly span the full width. The full-width panel’s desktop rule (align-items:flex-start) was winning by specificity and shrinking the column to its content; the mobile rules now override it so the column and its buttons fill 100%. This also makes every category share identical button sizing.
Settings: the live preview now sits below the tab bar line, aligned with the tab it belongs to.
Settings: the preview CTA renders as a clean full-width button (no stray icon), matching the real menu.

1.0.37

Settings: the live preview now follows the active tab — Desktop on General, Mobile on the Mobile tab — and hides on Locations (the form uses the full width). The manual Desktop/Mobile toggle is removed.

1.0.36

Menu label is now “Replai Mega Menu”; About page and hero show a Classlife sign-up CTA.
Fix: full-width panel columns fill the full width again (real flex columns).
Mobile: sub-item buttons are full width even when the text is short.
Plugin Check: removed “WordPress” from the plugin name, dropped load_plugin_textdomain, added translators comments and a sanitization annotation.

1.0.35

Column split now uses real flex columns instead of CSS multi-column, so sub-item buttons keep consistent gaps and padding (same look regardless of the panel).
Mobile: sub-item buttons now keep horizontal padding (were flush) while staying aligned with the parent label.

1.0.34

Sub-item link pills get a bit more default padding so they feel like proper buttons.

1.0.33

Fix: in the mobile drawer, categories now have identical internal spacing whether or not the panel uses column split (multi-column is flattened to a single vertical list on mobile).

1.0.32

Fix: full-width panels no longer cast their (desktop) drop shadow inside the mobile drawer, which showed as a strong grey band above the next item.

1.0.31

Mobile accordion rebuilt with a CSS grid (0fr1fr): collapsed sub-menus are now fully hidden (no leftover padding/shadow band) and open/close with a smooth animation.

1.0.30

Menu editor icon field: the preview now shows the chosen icon correctly on first load (Font Awesome, Dashicon or emoji), the raw text input is removed, and there’s a clear button to remove the icon.

1.0.29

Mobile accordion now animates smoothly (real content height) when opening/closing sub-menus.
Fix: on medium screens the hamburger stays on the right (not centered) when moved out of a collapsible theme navbar.
Settings hero uses a flat color instead of a gradient.

1.0.28

Full-width panel now shows a subtle bottom shadow (the clip-path reveal no longer cuts it off).
Mobile: sub-menus now open/close with a smooth accordion (animated height).

1.0.27

Sub-item link pills get a bit of horizontal padding so the icon isn’t glued to the edge.

1.0.26

Fix: the mobile hamburger now takes the theme toggler’s exact inline slot (no line break).
Fix: full-width panels keep the left padding in the mobile drawer (content no longer stuck to the edge).
Fix: CTA buttons no longer overflow the mobile drawer (width accounts for padding).
Fix: the drawer header logo also detects JupiterX/Bootstrap navbar brands.

1.0.25

Fix: when the menu lives inside a theme’s collapsible navbar (e.g. JupiterX Bootstrap navbar), Replai’s hamburger is now moved out to the visible navbar and the theme’s own toggler is hidden automatically — so on mobile it opens the Replai menu, not the theme’s.

1.0.24

Fix: the mobile drawer now animates on the very first tap of the hamburger.
Mobile sub-items get comfortable padding aligned with the parent item.
Mobile uses the same dropdown arrow style chosen for desktop.
New (Mobile tab): option to hide the theme’s own mobile menu button, so themes like JupiterX don’t show two hamburgers.

1.0.23

Fix: the rmm-menu class is now injected server-side into the menu HTML, removing the flash/jump on page load with themes that don’t apply menu_class (e.g. JupiterX).

1.0.22

New: sub-item title and subtitle sizes on an XS–XL scale, with separate values for desktop and mobile.
Title/subtitle/heading sizes are now hardened against theme CSS too.
Settings: the live preview now sits in a sticky column on the right (scaled to fit).

1.0.21

Hardened the menu styles against aggressive theme CSS (e.g. JupiterX) with higher-specificity rules, so font weight, colors, spacing, links and CTA are not overridden — while still respecting your own settings.

1.0.20

Fix: the menu container now always gets the rmm-menu class (some themes/Elementor don’t apply menu_class), so hover, the drawer and all behavior work regardless of theme (e.g. JupiterX).

1.0.19

Fix: in the mobile drawer, sub-items now line up with the parent item’s label on the left.

1.0.18

New: live preview on the settings screen (shown across all tabs) with a Desktop/Mobile toggle that reflects your changes in real time.
In click mode, the arrow no longer animates on hover either.

1.0.17

New icon library (Elementor-style): sidebar with libraries, search, grid with names and an Insert button. Includes Font Awesome (Solid & Brands, bundled locally), Dashicons and Emoji.
Fix: in click mode, panels no longer open on hover.
Icon size can now be set specifically for mobile (inherits the general size unless set).
Short description field moved right under the title in the menu editor.
CTA button option works on top-level items and sub-items.

1.0.16

Settings reorganized into tabs: General, Mobile and Locations.
Icon size now scales proportionally (box + glyph).
Per-item icon color override from Appearance Menus.
Full-width panel now reveals top-to-bottom (and hides in reverse).
Mobile drawer can open from the left or the right.

1.0.15

New: option to hide item icons on mobile only.
New: icon size on an XS–XL scale.
Parent items whose link is “#” now toggle their dropdown when you click the whole pill (on mobile, and on desktop in click mode or full-width).

1.0.14

Fix: hamburger/close/expand buttons are reset against themes (e.g. Elementor Kit) that add padding/border to every button, so the icon looks right.
Fix: in the mobile drawer, a top-level item’s sub-items now expand below it (not beside it).

1.0.13

Fix: the icon picker modal stylesheet was being dropped because of an invalid dependency; it now loads, so the modal shows styled.
Full-width panel: small gap below the menu, no top border and a downward-only shadow.

1.0.12

Fix: reset list-item margins so themes that add a margin to the last <li> no longer push the last top-level item out of alignment.

1.0.11

Icon picker redesigned as a centered modal with library tabs (Dashicons and Emoji), a search box and larger targets.

1.0.10

Fix: rebuilt translations with correct UTF-8 (accents no longer show as mojibake).
New global options: dropdown arrow style (chevron / triangle / plus-minus / none), accent color for the arrow, and item spacing, font size and font weight on an XS–XL scale.
Top-level items are vertically aligned.

1.0.9

Fix: bundled translations no longer contain empty entries, which were blanking some UI strings (including the “Mega Menu” admin menu title) on translated sites.
Full-width panel is now pinned to the viewport (100% wide) with its content centered on screen.
Sub-item icons are shown in a rounded, tinted box (title + description beside), matching the big SaaS mega menus.

1.0.8

Fix: the admin menu icon is now sized correctly (18px, rounded) like the other Replai plugins, via a global admin stylesheet.
Full-width panel columns are aligned to the menu’s left edge (measured with JS) so they line up with the menu.

1.0.7

Full-width panel now truly spans 100% of the viewport, with its columns aligned to a centered content container (same inset as the header), like the big SaaS menus.

1.0.6

Admin redesign to match the other Replai plugins: gradient hero with the white Replai logo and version chips, the Replai “R” as the menu icon, and card-based layout.
“About” is now its own separate page (submenu), like the rest of the plugins.

1.0.5

Cleaner three-line hamburger icon on mobile.
Packaging fix: the zip now wraps the plugin folder so WordPress updates the existing plugin instead of installing a duplicate.

1.0.4

Added a “Settings” link on the Plugins screen so the top-level “Mega Menu” section is always easy to reach.

1.0.3

Fix: the mobile drawer is now moved to the page body when opened, so the dark overlay stays behind it and the panel is no longer clipped by the theme header.

1.0.2

New: automatic 2/3/4 column split in mega panels (no more manual “new column”).
New: top/bottom panel padding with an XS–XXL scale.
New: visual icon picker on each sub-item (searchable Dashicons grid, or type a class/emoji).
New: own top-level admin section “Mega Menu” with a header and Settings / Help / About tabs (was under Appearance).
Improved: mobile drawer now has a header with the site logo and a close button, and is more robust against themes that hide the menu.
i18n: bundled translations for Spanish, Catalan, French, Italian and Portuguese, plus an updated .pot.

1.0.1

New: Elementor widget — drag “Replai Mega Menu” into any Elementor header/template and pick a menu or theme location.
Load Dashicons on the front end so item icons show correctly.
Register a plugin menu location so Appearance Menus is always available (also on block themes), plus a welcome notice explaining how to turn the mega menu on.

1.0.0

Initial release: mega panels built on native menus (columns, headings, icons, badges, featured cards, CTA buttons), responsive mobile drawer, global style settings, theme-location replacement and shortcode.