Starting with Uncode 2.10, you can harness the complete power of Content Blocks to create stunning Megamenus that significantly enhance user experience and effectively showcase your content—all without requiring additional plugins. Megamenus enable you to build rich, content-filled navigation dropdowns that transcend simple text links. Through Content Blocks integration, you can incorporate images, videos, buttons, custom layouts, and virtually any other elements to craft immersive and engaging navigation experiences.

Demo examples

We have created a dedicated demo page that showcases various Megamenu examples within the main navigation. These examples illustrate the creative possibilities that Megamenus with Content Blocks integration offer, demonstrating how this enhanced system delivers professional and engaging navigation experiences:

• Features - Megamenu

You can also explore the redesigned main Menu of Uncode, which now features the new Megamenu system:

• Uncode Theme - Demo

How it works

The fundamental functionality of the new Megamenu system lies in its ability to connect Content Blocks to Main Menu items, thereby creating rich dropdown experiences. To establish this connection between a Content Block and a Menu item:

1. Create a Content Block containing your desired content, screenshot ;
2. Locate the Megamenu Settings element and activate the Megamenu option, screenshot . Optionally, choose one of the available animation options, or manage animations from Theme Options to maintain consistency across all your Megamenus. At the Theme Options level, the animation is managed by the Navbar → Behaviour → Menu Sub-Levels Animation option;
3. For better organization, we recommend categorizing the Content Block for future reference, screenshot ;
4. Navigate to Appearance → Menus;
5. Within your Main Menu, create a Menu and insert a Custom Link (with '#" as URL value) that will serve as the container for your Megamenu, screenshot ;
6. From the Content Blocks list, insert your Content Block as a child of the Custom Link (if the Content Blocks list is not visibile, please enable it from the Screen Options in the top right corner of the Menu Editor page), screenshot ;
7. Save your Menu configuration.

Once completed, you will be able to display your Content Blocks within your horizontal Menu, screenshot .

Layout options

Using the familiar Row options, you can define various width configurations for your Megamenu:

• Full-Width: To create a Full-Width Megamenu, set the Row option 'Container width → Full' screenshot .
• Limited-Width: To create a constrained layout, set the Row option 'Container width → Limit', screenshot . Please note that if your Main Menu is positioned away from the Content Block, this approach may create hover continuity issues, making the Megamenu inaccessible. This solution works optimally with Menu Justify.
• Narrow-Width: To reduce Megamenu width for compact layouts similar to traditional dropdowns, combine the Limited-Width settings with the 'Columns → Limit-Width' option screenshot . With these settings, the Menu will anchor as close as possible to the parent Menu item while calculating viewport boundaries to prevent the Menu from extending beyond the visible area.

Style options

Using Row options, you can also configure essential Megamenu styling elements:

• Background: The Row's 'Style → Background' setting determines the Megamenu background. If this option is left unset, the background inherits from 'Theme Options → Customize → Light or Dark Skins → Primary Submenu Background'. This inheritance system ensures visual consistency across your navigation — because a Megamenu is fundamentally a dropdown menu, it follows the same styling rules. You can override this at any time by setting a specific background color in the Row options.
• Border: Any border separating the Megamenu from the Main Menu must be configured within the Content Block through the 'Custom tab' options. We intentionally chose not to automate this through Theme Options because different Megamenu designs within a website may have varying border requirements.
• Shadows: Shadow effects remain controlled by 'Theme Options → Menu dropdown shadow' to ensure that multiple Rows within the Megamenu display as a cohesive 'enclosed' block with unified shadow styling.

Menu Block module

After connecting your first Content Block and gaining control over the container (layout and style options), you can insert any of the supported Page Builder modules, including Heading, Single Media, Posts, Carousels, and others. When creating a Megamenu that contains traditional Menu-style links, the new Menu Block module becomes particularly valuable, screenshot .

Megamenu on mobile

Uncode's Megamenu system is fully responsive and delivers an optimized mobile experience through intelligent behavior adaptation. There are three strategic approaches for managing Megamenus on mobile devices, each tailored to specific project requirements:

1. Responsive adaptation: The Content Block design automatically adapts to mobile according to responsive grid options. This approach is typically employed for websites where Megamenu content can be effectively adapted for mobile use, screenshot . When using the Menu Block module, the Collapse option can transform Menu lists into accordions on mobile devices.
2. Desktop/Mobile visibility: Hide specific Columns or portions of the desktop-designed Row and display mobile-optimized content using the Visibility Settings of Rows or Columns screenshot . This approach is ideal when you need to modify or hide specific portions of the Megamenu for mobile optimization. Additionally, this method can be used to hide the entire desktop-designed Row and display another Row specifically designed for mobile, giving you complete control over different desktop and mobile presentations.
3. Mobile Menu Content Block: Hide the desktop Megamenu and implement a Mobile Menu Content Block that replaces the main desktop Menu on mobile devices. This approach involves creating two distinct Menus—one for desktop and one for mobile. This method is commonly used when rich graphical or grid-structured desktop Megamenus need to be replaced with streamlined, essential navigation on mobile, screenshot . Using Uncode's Menu Composite functionality allows you to create a single list of Menu items for easier management and scalability while displaying them across two different Menus, eliminating the need to create and maintain separate Menu structures.

Mobile spacing fine-tuning options

When adapting a Megamenu for mobile devices, you may encounter spacing issues that don't look quite right — this depends entirely on your specific Megamenu design. To address these cases, we've added specific options that have successfully resolved all spacing challenges across our demo Megamenus.

• Top and Bottom spacing adjustment: If the first Row or Column within a Megamenu has a background color, it might appear too tightly attached to the Menu item on mobile, screenshot . Using the Mobile Top Space option in the Megamenu Settings, screenshot , you can add breathing room to create a more harmonious mobile Menu appearance, screenshot . The same option is available for bottom spacing.
• Reduced padding for mobile: If your desktop Megamenu design uses Row or Column padding larger than 1x, this padding might feel excessive on mobile devices, screenshot . To solve this, we've created the 'un-mobile-reduced-padding' class, screenshot . Apply this class in the Extra tab → Class field of your Rows or Columns to normalize the top and bottom padding to the default 36px on mobile, screenshot .

Wireframes

The Wireframes plugin provides pre-designed Megamenu templates and patterns, enabling rapid implementation of professional navigation systems. Within the Wireframes selection window, you now have access to a dedicated "Megamenu" tab featuring 15 different Wireframes. When using the Wireframes plugin, three simple Wireframes Menus, with different structures, are automatically imported into your Menu Editor to populate the Wireframes that utilize the Menu Block module.

Notes

• Limit your contents: Please pay careful attention to what you include in your Megamenus and how many elements you insert. These are, after all, contents that are added to the page body and can impact your website's overall performance. Consider that a complex Megamenu can contain as much content as a standard page.
• Page Builder modules support: Please note that each Page Builder element used within Megamenus requires specific adjustments and may not function by default. We have tested and adapted numerous Page Builder elements, and those shown in our examples represent our currently supported modules. We will continue implementing additional modules over time, but if you need to use a module not visible in our demo examples, please verify compatibility first, as there is no guarantee it will work. Additionally, certain special functions—primarily those triggered by scroll actions—cannot work within the Megamenu context by their nature (Row Animations, Scroll Trigger, Color Changer, etc.).
• Megamenu titles cannot be active links on mobile: Megamenu titles (parent Menu items) function on mobile as textual containers for submenu items rather than clickable destinations. While this might technically work on desktop, it's not feasible to implement on mobile devices, where the parent Menu item must serve as the toggle to open and close the submenu accordion. On touch devices, the parent item click is reserved for expanding submenu content, and having an active link would conflict with this essential mobile functionality, screenshot . This functionality is only possible when using the Menu Block module without activating the Collapse option.