<\/p>\n\n
nav_menu_item<\/code> post meta.<\/li>\n- Frontend rendering<\/strong> \u2014 Custom Walker outputs mega panels with hover\/focus\/keyboard interaction.<\/li>\n
- Accessible<\/strong> \u2014 ARIA attributes, keyboard navigation, focus trapping.<\/li>\n
- Theme-friendly<\/strong> \u2014 CSS custom properties for easy theme overrides.<\/li>\n<\/ul>\n\n
Requirements<\/h3>\n\n\n- WordPress 6.0+<\/li>\n
- PHP 8.0+<\/li>\n
- Node.js 18+ (for development)<\/li>\n<\/ul>\n\n
Usage<\/h3>\n\n\n- Go to Appearance \u2192 Menus<\/strong>.<\/li>\n
- Click the \"Mega Menu\"<\/strong> link on any top-level menu item.<\/li>\n
- Toggle Enable Mega Menu<\/strong> in the Settings tab.<\/li>\n
- Switch to the Content Builder<\/strong> tab to design your mega menu content.<\/li>\n
- Use Import<\/strong> or Export<\/strong> in the modal header to apply a template or save your layout as JSON.<\/li>\n
- Click Save<\/strong>.<\/li>\n<\/ol>\n\n
Template Store<\/h3>\n\n
The builder can load starter layouts<\/strong> from JSON files on disk. In the modal header, click Import<\/strong> to browse the template store or upload a JSON file. Click Export<\/strong> to download the current content and settings.<\/p>\n\nWhere templates are loaded from<\/h4>\n\n
Templates are discovered from these folders (in order). If the same slug<\/code> exists in more than one place, later sources override earlier ones<\/strong>:<\/p>\n\n\n\n\n Priority\n Source\n Path\n\n\n\n\n 1 (low)\n Plugin\n beplus-visual-mega-nav\/templates\/*.json<\/code>\n\n\n 2\n Parent theme\n {theme}\/mega-menu-templates\/*.json<\/code>\n\n\n 3 (high)\n Child theme\n {child-theme}\/mega-menu-templates\/*.json<\/code>\n\n\n\n\nExample (Nextora parent theme):<\/strong><\/p>\n\nwp-content\/themes\/nextora\/mega-menu-templates\/brand-nav.json\n<\/code><\/pre>\n\nExample (child theme override):<\/strong><\/p>\n\nwp-content\/themes\/nextora-child\/mega-menu-templates\/three-column-nav.json\n<\/code><\/pre>\n\nA child-theme file with the same filename\/slug as a plugin template replaces the plugin version in the Import dropdown.<\/p>\n\n
Built-in plugin templates<\/h4>\n\n\n\n\n Slug\n Title\n\n\n\n\n three-column-nav<\/code>\n Three Column Navigation\n\n\n featured-with-links<\/code>\n Featured + Links\n\n\n\n\nSee templates\/<\/code> in this plugin for reference implementations.<\/p>\n\nTemplate JSON format<\/h4>\n\n
Each file is a single JSON object:<\/p>\n\n
{\n \"slug\": \"my-custom-menu\",\n \"title\": \"My Custom Menu\",\n \"description\": \"Optional short description shown in the Import dropdown.\",\n \"version\": \"1.0.0\",\n \"settings\": {\n \"width\": \"full\",\n \"customWidth\": 1200,\n \"bgColor\": \"\",\n \"animation\": \"fade\"\n },\n \"content\": \"<!-- wp:columns -->...\"\n}\n<\/code><\/pre>\n\n\n\n\n Field\n Required\n Notes\n\n\n\n\n slug<\/code>\n Recommended\n Used as the filename ({slug}.json<\/code>). If omitted, the filename (without .json<\/code>) is used.\n\n\n title<\/code>\n Recommended\n Label in the Import dropdown.\n\n\n description<\/code>\n Optional\n Shown under the title in the Import dropdown.\n\n\n version<\/code>\n Optional\n Template metadata only.\n\n\n settings<\/code>\n Optional\n Panel settings applied with the template (width<\/code>, customWidth<\/code>, bgColor<\/code>, animation<\/code>).\n\n\n content<\/code>\n Required<\/strong>\n Serialized Gutenberg block HTML (same format saved to menu item meta).\n\n\n\n\nExported files from Export<\/strong> use the same shape (they may omit slug<\/code>). You can drop an export into mega-menu-templates\/<\/code> and add a slug<\/code> to register it in the store.<\/p>\n\ncontent 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`).\n<\/code><\/pre>\n\nAllowed blocks<\/h4>\n\n\n\n\n Category\n Blocks\n\n\n\n\n Layout\n core\/columns<\/code>, core\/column<\/code>, core\/group<\/code>, core\/row<\/code>, core\/stack<\/code>\n\n\n Content\n core\/heading<\/code>, core\/paragraph<\/code>, core\/list<\/code>, core\/list-item<\/code>, core\/image<\/code>, core\/buttons<\/code>, core\/button<\/code>, core\/separator<\/code>, core\/spacer<\/code>\n\n\n Navigation\n core\/page-list<\/code>, beplus-visual-mega-nav\/link-item<\/code>\n\n\n Media\n core\/cover<\/code>\n\n\n Embeds \/ widgets\n core\/shortcode<\/code>, core\/html<\/code>\n\n\n\n\nadd_filter( 'beplus_vmn_allowed_blocks', function ( array $blocks ): array {\n $blocks[] = 'my-plugin\/custom-block';\n return $blocks;\n} );\n<\/code><\/pre>\n\nImport behaviour<\/h4>\n\n\n- Template store<\/strong> \u2014 Lists all valid JSON templates from the plugin and active theme(s).<\/li>\n
- Upload JSON file<\/strong> \u2014 Import any file matching the format above (does not need to live in a template folder).<\/li>\n
- Applying a template replaces the current Content Builder<\/strong> content and Settings<\/strong> in the modal. Click Save<\/strong> to persist changes to the menu item.<\/li>\n<\/ul>\n\n
REST API<\/h4>\n\n\n\n\n Method\n Route\n Description\n\n\n\n\n GET<\/code>\n \/wp-json\/beplus-visual-mega-nav\/v1\/templates<\/code>\n List template summaries (slug<\/code>, title<\/code>, description<\/code>, source<\/code>).\n\n\n GET<\/code>\n \/wp-json\/beplus-visual-mega-nav\/v1\/templates\/{slug}<\/code>\n Load full template (settings<\/code> + content<\/code>).\n\n\n\n\nRequires edit_theme_options<\/code>.<\/p>\n\nPHP hooks<\/h4>\n\n\/\/ Add or replace template scan directories (source label => absolute path).\nadd_filter( 'beplus_vmn_template_directories', function ( $directories ) {\n $directories['custom'] = '\/path\/to\/my\/templates';\n return $directories;\n} );\n\n\/\/ Filter the template list returned to the admin UI.\nadd_filter( 'beplus_vmn_templates', function ( $templates ) {\n \/\/ $templates is keyed by slug.\n return $templates;\n} );\n\n\/\/ Filter a single template before it is returned.\nadd_filter( 'beplus_vmn_template_data', function ( $template, $slug ) {\n return $template;\n}, 10, 2 );\n~~~<h3>Development<\/h3>\n<\/code><\/pre>\n\nnpm run start # Watch mode\nnpm run build # Production build\ncomposer check # PHP lint + PHPCS + PHPStan\nnpm run check:js # ESLint + Stylelint\n~~~<\/p>\n\n\n
# Clone the plugin\ncd wp-content\/plugins\/\ngit clone https:\/\/github.com\/miketropi\/beplus-visual-mega-nav.git beplus-visual-mega-nav\ncd beplus-visual-mega-nav\n\n# Install dependencies\ncomposer install\nnpm install\n\n# Build assets\nnpm run build\n<\/code><\/pre>\n\nActivate the plugin in Plugins<\/strong> \u2192 Installed Plugins<\/strong>.<\/p>\n\n\n\n