Layout · Gutenberg
Mega Menu block for WordPress
Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels.
Inspector panels on this block: Navigation Items, Logo & CTA, Menu Behaviour. Those titles come from index.js, not from a shared template.
Behavior controls: “CTA Style” options: Filled, Outline.
Where to find it
Gutenberg inserter → Layout → search “Mega Menu” (block name `blockenberg/mega-menu` in block.json). Style it in the sidebar after insert.
How to use Mega Menu block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Mega Menu”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Navigation Items. Set “Label”, “URL”, “Has mega dropdown”, “Column Heading”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Label | Text field in the inspector. |
| URL | Text field in the inspector. |
| Has mega dropdown | On/off toggle in the inspector. |
| Column Heading | Text field in the inspector. |
| Link Label | Text field in the inspector. |
| Description | Text field in the inspector. |
| Show featured panel | On/off toggle in the inspector. |
| Title | Text field in the inspector. |
| CTA Label | Text field in the inspector. |
| CTA URL | Text field in the inspector. |
| Logo Alt Text | Text field in the inspector. block.json default: Logo. Saved as `logoAlt`. |
| Logo Width (px) | Numeric range control in the inspector. Range 60–300. block.json default: 140. Saved as `logoWidth`. |
| Show CTA Button | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| CTA Label (Cta Label) | Text field in the inspector. block.json default: Get Started. Saved as `ctaLabel`. |
| CTA URL (Cta Url) | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| CTA Style | Select control; the chosen value is saved on the block. Options: Filled; Outline. block.json default: filled. Saved as `ctaStyle`. |
| Menu Bar Height (px) | Numeric range control in the inspector. Range 48–100. block.json default: 64. Saved as `menuHeight`. |
| Sticky on scroll | On/off toggle in the inspector. On by default. Saved as `sticky`. |
| Open panel on hover | On/off toggle in the inspector. On by default. Saved as `openOnHover`. |
| Show link icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Show link descriptions | On/off toggle in the inspector. On by default. Saved as `showDescriptions`. |
| Panel Max Width (px) | Numeric range control in the inspector. Range 400–1200. block.json default: 820. Saved as `panelWidth`. |
| Panel Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `panelRadius`. |
| Menu Bar Background | Color control in the inspector. block.json default: #ffffff. Saved as `menuBg`. |
| Menu Text | Color control in the inspector. block.json default: #0f172a. Saved as `menuText`. |
| Menu Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `menuBorder`. |
| Panel Background | Color control in the inspector. block.json default: #ffffff. Saved as `panelBg`. |
| Panel Text | Color control in the inspector. block.json default: #0f172a. Saved as `panelText`. |
| Accent / Hover | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| CTA Background | Color control in the inspector. block.json default: #6366f1. Saved as `ctaBg`. |
| CTA Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
| Featured Panel BG | Color control in the inspector. block.json default: #ede9fe. Saved as `featuredBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Headers keep aria-expanded in sync so screen readers hear open vs closed.
When this is the right block
- Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels — that is the job of Mega Menu, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about menu, navigation, mega.
- Inserter grouping: page structure, sections, and composition.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Mega Menu block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Mega Menu”. It sits under Layout. After insert, open Navigation Items and set “Label”, “URL”, “Has mega dropdown”, “Column Heading”.
What makes Mega Menu different from other Blockenberg blocks?
Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels. Inspector labels on this block include “Label”, “URL”, “Has mega dropdown”, “Column Heading”.
Is the Mega Menu Gutenberg block free?
Yes. Mega Menu ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Mega Menu to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Navigation Items, Logo & CTA, Menu Behaviour).
Related layout blocks
Sticky Header
A fully-styled site header with logo (image or text), navigation links, and an optional CTA button. Sticks to the top on scroll with a shrink animation. Supports light, dark, glass, and gradient style variants.
Mega Footer
Full-featured site footer with logo, tagline, link columns, social links, and a bottom bar.
Page List
A styled list of pages or links with optional icons, hierarchy, and rich color controls.
Content Menu
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline.
Minimal Footer
Clean, minimal site footer with logo (image or text), navigation columns, social icon links, and copyright line. A lighter alternative to the mega-footer.
Side Menu
Hierarchical vertical navigation with collapsible sections for docs, wikis, and multi-section pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Mega Menu from the Gutenberg inserter.