Advanced Mega Menu
Transform your standard WordPress navigation into a high-performance, multi-column mega menu experience. Designed for professional site layouts, the Advanced Mega Menu block lets you organize complex site structures into visually rich, interactive navigation — without writing a single line of code.
This block works by integrating seamlessly with the core WordPress Navigation block. At its heart, the Advanced Mega Menu contains a Navigation block, and nested within it, a Cozy Custom Link — the key element to which Mega Menu Templates are applied. Mega Menu Templates are a signature Cozy Blocks feature managed directly from your WordPress dashboard, and they can only be assigned to the Cozy Custom Link found inside this block.
When a visitor clicks or hovers over a primary navigation link, the assigned Mega Menu Template instantly reveals a pre-designed, content-rich dropdown layout — giving your users a fast, intuitive browsing experience.
- Note:
- Mega Menu Templates are exclusive to the Cozy Custom Link inside this block. They cannot be applied to any other block or navigation element.
Setting Up Advanced Mega Menu
1. Create Your Menu Content
Before configuring the navigation, you must design the content that will appear inside the menu:
- Navigate to Dashboard > Mega Menu Templates > Add New Template.
- Build your layout using any block pattern or design. This template will serve as the rich content displayed when the menu is triggered.
2. Enable the Mega Menu Block
Once your template is ready, head to your page editor:
- Add the Advanced Mega Menu block
- Locate the Cozy Custom Block nested within your Advanced Mega Menu block.
- Open the Settings (âš™) tab on the right-hand sidebar
- Toggle the Enable Mega Menu option to On.
3. Assign Your Template
After enabling the toggle, a dynamic dropdown will appear:
- Select Template: Choose your pre-created template from the dropdown list.
- Content Width: Full Width allows the mega menu content to span 100% of the browser window. Default Width restricts the content to a specific size. You can then input the desired width (e.g., 1180px) to keep your navigation contained.
Note: If no templates appear, ensure you have published your design in the Mega Menu Templates section of the dashboard.
Settings âš™
Mega Menu Settings
The Mega Menu Settings panel provides functional controls for how the menu behaves and appears to the user. These settings ensure the navigation is accessible and correctly positioned relative to the header.
- Open Mega Menu on Click: By default, the menu reveals on hover. Enable this toggle to require a mouse click to open the menu, which is often preferred for touch-screen compatibility and specific user experiences.
- Enable Dropdown Icon: Toggle this to display a visual indicator (such as a small arrow) next to the menu item, signaling to users that a sub-menu or mega-menu is available.
- Top Offset: Adjust the vertical distance between the navigation link and the start of the mega-menu container. This is useful for aligning the menu perfectly with the bottom of your header or overlapping it for specific designs.
- Responsive Control: Look for the Device Icon next to the slider to set unique offset values for Desktop, Tablet, and Mobile views.
Responsive Menu Settings
The Responsive Menu Settings panel ensures your navigation remains functional and aesthetically pleasing on smaller screens. Use these options to define how the mobile menu transitions and behaves across different devices.
- Overlay Menu: Enable this toggle to transform the standard navigation into a full-screen or slide-out overlay for mobile users.
- Responsive Breakpoint: Define the specific screen width (in pixels) at which the standard desktop menu switches to the mobile-friendly responsive layout.
- Menu Slide From: Select whether the overlay menu animates into the screen from the Left or Right side.
- Min. Width (Responsive): Set the minimum horizontal width of the slide-out menu container. Use the Device Icon next to the slider to adjust this specifically for Tablet or Mobile views.
- Overlay Alignment: Choose the text and content alignment (Left, Center, or Right) within the overlay container.
- Open & Close Icons: Select custom icons from the library to represent the “Hamburger” menu trigger and the “Close” button.
- Icon Alignment: Position the menu trigger icon to the Left, Center, or Right of the header area.