Starting from Uncode 2.10, you can create composite Menus built from smaller Menu fragments. This innovative approach enables you to construct Menu fragments that can be combined and reused within larger Menu structures, significantly simplifying the management and maintenance of complex navigation systems.
This unique WordPress theme feature was specifically developed to address challenges introduced by the new Megamenu with Content Blocks system and Mobile Menu with Content Blocks functionality.
Why Menu Composite exists
The Megamenu with Content Blocks system creates a fundamental difference between desktop and mobile navigation approaches. On desktop, the system works best with multiple Menu fragments - separate, smaller Menus that can be positioned in different Rows and Columns for specific layout requirements. These fragments are then arranged within Content Blocks to create a cohesive, unified Menu presentation, screenshot .
In contrast, mobile navigation requires a single, streamlined Menu structure where the same Menu fragments are recomposed into one unified Menu, typically presented as a collapsible Accordion format for optimal touch interaction, screenshot .
The maintenance problem
Without Menu Composite, you would need to maintain separate desktop and mobile Menu structures in WordPress. For complex websites, this creates a maintenance nightmare:
- Updating a single link requires modifying it in multiple locations;
- Adding a new menu item means remembering to add it to both desktop fragments and the mobile Menu;
- Forgetting one update results in inconsistent navigation across your site.
How Menu Composite solves this
Menu Composite creates a single source of truth for your navigation content:
- Create once, use everywhere: Build focused Menu fragments like "Features", "Products", or "Support Links";
- Compose larger structures: Insert these fragments into both desktop Megamenus and mobile Menus;
- Update once, changes everywhere: Modify a link in the fragment and it updates across all implementations;
- Flexible presentation: Same Menu content can display as multi-column grids on desktop and clean Accordions on mobile.
How to create a Menu Composite
- Find the new Menus tab: Menu Composite functionality integrates directly into the WordPress Menu Editor. In the left column where you normally find options to add Pages, Categories, Products, or Posts, you'll now discover a new "Menus" tab containing all Menus available in your WordPress installation.
- Create your container Menu: Create a new Menu that will serve as your container (for example, "Main Menu [Mobile]"). This Menu will hold all your Menu fragments organized under top-level parent items.
- Add top-level structure: Add the main navigation sections as top-level items (Parents). These will become the primary categories in your final Menu structure.
- Insert Menu fragments as children: Now comes the innovative part: instead of manually adding individual menu items, you insert entire Menu fragments as children under each parent section. In this example, we have a Menu called "Main Menu [Mobile]" composed of various Menu fragments, such as the "Main Features | Highlights" fragment (which itself contains individual Menu items like Row Animations, Stacked Card, etc.). We're essentially inserting Menu fragments into a container Menu structure, screenshot .
- Use your composite Menu: Your new composite Menu now contains all the individual Menu items from all the fragments you inserted. You can use this complete Menu structure through the Menu Block module for creating Mobile Menu with Content Blocks, screenshot .
Centralized management and examples
The strength of this system is centralized management. When you need to add, remove, or update a link, you work only on the original Menu fragment. The changes automatically appear everywhere those fragments are used. For example, let's examine three completely different layouts that all use the same Menu source — a modification is automatically propagated across all three:
- Desktop advanced Megamenu with Content Blocks, example;
- Desktop Menu with simple Megamenus and standard dropdowns, example;
- Mobile advanced Menu with Content Blocks, example (test from mobile);
This eliminates the need to maintain multiple separate Menu structures while ensuring perfect consistency across all navigation implementations. It's like having a master template that automatically updates all its copies.
Comments
0 comments
Article is closed for comments.