Title: Beplus Visual Mega Navigation Author: Mike Published: July 11, 2026 Last modified: July 11, 2026 --- Search plugins ![](https://ps.w.org/beplus-visual-mega-nav/assets/banner-772x250.png?rev=3603643) ![](https://ps.w.org/beplus-visual-mega-nav/assets/icon-256x256.png?rev=3603636) # Beplus Visual Mega Navigation By [Mike](https://profiles.wordpress.org/miketropi/) [Download](https://downloads.wordpress.org/plugin/beplus-visual-mega-nav.0.0.7.zip) * [Details](https://wordpress.org/plugins/beplus-visual-mega-nav/#description) * [Reviews](https://wordpress.org/plugins/beplus-visual-mega-nav/#reviews) * [Installation](https://wordpress.org/plugins/beplus-visual-mega-nav/#installation) * [Development](https://wordpress.org/plugins/beplus-visual-mega-nav/#developers) [Support](https://wordpress.org/support/plugin/beplus-visual-mega-nav/) ## Description #### Features * **Visual builder** — Use the block editor to design mega menu content with columns, images, buttons, and more. * **Per-item settings** — Enable/disable, width mode, background color, animation per menu item. * **Import / export** — Apply starter layouts from a template store or export your design as JSON. * **Root-level only** — Only top-level menu items get the mega menu option (depth- 0). * **Clean data storage** — Settings and content saved as `nav_menu_item` post meta. * **Frontend rendering** — Custom Walker outputs mega panels with hover/focus/keyboard interaction. * **Accessible** — ARIA attributes, keyboard navigation, focus trapping. * **Theme-friendly** — CSS custom properties for easy theme overrides. ### Requirements * WordPress 6.0+ * PHP 8.0+ * Node.js 18+ (for development) ### Usage 1. Go to **Appearance Menus**. 2. Click the **“Mega Menu”** link on any top-level menu item. 3. Toggle **Enable Mega Menu** in the Settings tab. 4. Switch to the **Content Builder** tab to design your mega menu content. 5. Use **Import** or **Export** in the modal header to apply a template or save your layout as JSON. 6. Click **Save**. ### Template Store The builder can load **starter layouts** from JSON files on disk. In the modal header, click **Import** to browse the template store or upload a JSON file. Click **Export** to download the current content and settings. #### Where templates are loaded from Templates are discovered from these folders (in order). If the same `slug` exists in more than one place, **later sources override earlier ones**: Priority Source Path 1 (low) Plugin `beplus-visual-mega-nav/templates/*.json` 2 Parent theme `{theme}/mega-menu-templates/*.json` 3 (high) Child theme `{child-theme}/mega-menu-templates/*.json` **Example (Nextora parent theme):** ``` wp-content/themes/nextora/mega-menu-templates/brand-nav.json ``` **Example (child theme override):** ``` wp-content/themes/nextora-child/mega-menu-templates/three-column-nav.json ``` A child-theme file with the same filename/slug as a plugin template replaces the plugin version in the Import dropdown. #### Built-in plugin templates Slug Title `three-column-nav` Three Column Navigation `featured-with-links` Featured + Links See `templates/` in this plugin for reference implementations. #### Template JSON format Each file is a single JSON object: ``` { "slug": "my-custom-menu", "title": "My Custom Menu", "description": "Optional short description shown in the Import dropdown.", "version": "1.0.0", "settings": { "width": "full", "customWidth": 1200, "bgColor": "", "animation": "fade" }, "content": "..." } ``` Field Required Notes `slug` Recommended Used as the filename (`{slug}.json`). If omitted, the filename( without `.json`) is used. `title` Recommended Label in the Import dropdown. `description` Optional Shown under the title in the Import dropdown. `version` Optional Template metadata only. `settings` Optional Panel settings applied with the template (`width`, `customWidth`,` bgColor`, `animation`). `content` **Required** Serialized Gutenberg block HTML (same format saved to menu item meta). Exported files from **Export** use the same shape (they may omit `slug`). You can drop an export into `mega-menu-templates/` and add a `slug` to register it in the store. ``` content is sanitized on load using the same rules as saved mega menu content. Use only blocks from the allowed list below (extend via `beplus_vmn_allowed_blocks`). ``` #### Allowed blocks Category Blocks Layout `core/columns`, `core/column`, `core/group`, `core/row`, `core/stack` Content `core/heading`, `core/paragraph`, `core/list`, `core/list-item`, `core/ image`, `core/buttons`, `core/button`, `core/separator`, `core/spacer` Navigation `core/page-list`, `beplus-visual-mega-nav/link-item` Media `core/cover` Embeds / widgets `core/shortcode`, `core/html` ``` add_filter( 'beplus_vmn_allowed_blocks', function ( array $blocks ): array { $blocks[] = 'my-plugin/custom-block'; return $blocks; } ); ``` #### Import behaviour * **Template store** — Lists all valid JSON templates from the plugin and active theme(s). * **Upload JSON file** — Import any file matching the format above (does not need to live in a template folder). * Applying a template replaces the current **Content Builder** content and **Settings** in the modal. Click **Save** to persist changes to the menu item. #### REST API Method Route Description `GET` `/wp-json/beplus-visual-mega-nav/v1/templates` List template summaries (` slug`, `title`, `description`, `source`). `GET` `/wp-json/beplus-visual-mega-nav/v1/templates/{slug}` Load full template(` settings` + `content`). Requires `edit_theme_options`. #### PHP hooks ``` // Add or replace template scan directories (source label => absolute path). add_filter( 'beplus_vmn_template_directories', function ( $directories ) { $directories['custom'] = '/path/to/my/templates'; return $directories; } ); // Filter the template list returned to the admin UI. add_filter( 'beplus_vmn_templates', function ( $templates ) { // $templates is keyed by slug. return $templates; } ); // Filter a single template before it is returned. add_filter( 'beplus_vmn_template_data', function ( $template, $slug ) { return $template; }, 10, 2 ); ~~~

Development

``` npm run start # Watch mode npm run build # Production build composer check # PHP lint + PHPCS + PHPStan npm run check:js # ESLint + Stylelint ~~~ ## Screenshots [[ [[ [[ [[ [[ [[ ## Blocks This plugin provides 4 blocks. * BePlus Header Outer header container with sticky positioning, scroll effects, and per-instance mobile breakpoint. * Nav Toggle Hamburger button that opens the mobile navigation overlay below the breakpoint. * BePlus Navigation Flexible navigation container that hosts a classic menu and hamburger toggle. * Menu Area Renders a classic WordPress menu using the existing mega menu engine. ## Installation ``` # Clone the plugin cd wp-content/plugins/ git clone https://github.com/miketropi/beplus-visual-mega-nav.git beplus-visual-mega-nav cd beplus-visual-mega-nav # Install dependencies composer install npm install # Build assets npm run build ``` Activate the plugin in **Plugins** **Installed Plugins**. ## FAQ ### How do I add my theme’s menu location? Use the `beplus_vmn_locations` filter: ``` add_filter( 'beplus_vmn_locations', function ( $locations ) { $locations[] = 'your-theme-location'; return $locations; } ); ``` ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Beplus Visual Mega Navigation” is open source software. The following people have contributed to this plugin. Contributors * [ Mike ](https://profiles.wordpress.org/miketropi/) [Translate “Beplus Visual Mega Navigation” into your language.](https://translate.wordpress.org/projects/wp-plugins/beplus-visual-mega-nav) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/beplus-visual-mega-nav/), check out the [SVN repository](https://plugins.svn.wordpress.org/beplus-visual-mega-nav/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/beplus-visual-mega-nav/) by [RSS](https://plugins.trac.wordpress.org/log/beplus-visual-mega-nav/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 0.0.5 * Initial release. ## Meta * Version **0.0.7** * Last updated **1 day ago** * Active installations **Fewer than 10** * WordPress version ** 6.0 or higher ** * Tested up to **7.0.1** * PHP version ** 8.0 or higher ** * Tags * [block-editor](https://wordpress.org/plugins/tags/block-editor/)[gutenberg](https://wordpress.org/plugins/tags/gutenberg/) [mega menu](https://wordpress.org/plugins/tags/mega-menu/)[menu builder](https://wordpress.org/plugins/tags/menu-builder/) [navigation](https://wordpress.org/plugins/tags/navigation/) * [Advanced View](https://wordpress.org/plugins/beplus-visual-mega-nav/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/beplus-visual-mega-nav/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/beplus-visual-mega-nav/reviews/) ## Contributors * [ Mike ](https://profiles.wordpress.org/miketropi/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/beplus-visual-mega-nav/)