Title: Beplus Visual Mega Navigation Author: Beplus Published: 11 juillet 2026 Last modified: 15 juillet 2026 --- Recherche d’extensions ![](https://ps.w.org/beplus-visual-mega-nav/assets/banner-772x250.png?rev=3605326) ![](https://ps.w.org/beplus-visual-mega-nav/assets/icon-256x256.png?rev=3605326) # Beplus Visual Mega Navigation Par [Beplus](https://profiles.wordpress.org/bearsthemes/) [Télécharger](https://downloads.wordpress.org/plugin/beplus-visual-mega-nav.0.0.9.zip) * [Détails](https://fr.wordpress.org/plugins/beplus-visual-mega-nav/#description) * [Avis](https://fr.wordpress.org/plugins/beplus-visual-mega-nav/#reviews) * [Installation](https://fr.wordpress.org/plugins/beplus-visual-mega-nav/#installation) * [Développement](https://fr.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 ~~~ ## Captures d’écrans [[ [[ [[ [[ [[ [[ ## Blocs Cette extension fournit 4 blocs. * 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. * Menu Area Renders a classic WordPress menu using the existing mega menu engine. * BePlus Navigation Flexible navigation container that hosts a classic menu and hamburger toggle. ## 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; } ); ``` ## Avis Il n’y a aucun avis pour cette extension. ## Contributeurs/contributrices & développeurs/développeuses « Beplus Visual Mega Navigation » est un logiciel libre. Les personnes suivantes ont contribué à cette extension. Contributeurs * [ Beplus ](https://profiles.wordpress.org/bearsthemes/) * [ Mike ](https://profiles.wordpress.org/miketropi/) [Traduisez « Beplus Visual Mega Navigation » dans votre langue.](https://translate.wordpress.org/projects/wp-plugins/beplus-visual-mega-nav) ### Le développement vous intéresse ? [Parcourir le code](https://plugins.trac.wordpress.org/browser/beplus-visual-mega-nav/), consulter le [SVN dépôt](https://plugins.svn.wordpress.org/beplus-visual-mega-nav/), ou s’inscrire au [journal de développement](https://plugins.trac.wordpress.org/log/beplus-visual-mega-nav/) par [RSS](https://plugins.trac.wordpress.org/log/beplus-visual-mega-nav/?limit=100&mode=stop_on_copy&format=rss). ## Journal des modifications #### 0.0.9 * New **Block** tab in the mega menu modal for improved block management. #### 0.0.5 * Initial release. ## Méta * Version **0.0.9** * Dernière mise à jour **il y a 5 heures** * Installations actives **Moins de 10** * Version de WordPress ** 6.0 ou plus ** * Testé jusqu’à **7.0.1** * Version de PHP ** 8.0 ou plus ** * Langue * [English (US)](https://wordpress.org/plugins/beplus-visual-mega-nav/) * Étiquettes * [block-editor](https://fr.wordpress.org/plugins/tags/block-editor/)[gutenberg](https://fr.wordpress.org/plugins/tags/gutenberg/) [mega menu](https://fr.wordpress.org/plugins/tags/mega-menu/)[menu builder](https://fr.wordpress.org/plugins/tags/menu-builder/) [navigation](https://fr.wordpress.org/plugins/tags/navigation/) * [Vue avancée](https://fr.wordpress.org/plugins/beplus-visual-mega-nav/advanced/) ## Évaluations Aucun avis n’a encore été envoyé. [Your review](https://wordpress.org/support/plugin/beplus-visual-mega-nav/reviews/#new-post) [Voir tous les avis](https://wordpress.org/support/plugin/beplus-visual-mega-nav/reviews/) ## Contributeurs * [ Beplus ](https://profiles.wordpress.org/bearsthemes/) * [ Mike ](https://profiles.wordpress.org/miketropi/) ## Support Quelque chose à dire ? Besoin d’aide ? [Voir le forum de support](https://wordpress.org/support/plugin/beplus-visual-mega-nav/)