Starting with Uncode 2.10, new powerful features have been introduced for creating Advanced Megamenus, Mobile Menus with Content Blocks, and Menu Composite functionality.
After importing Demo Contents, you'll notice about 30 different Menus in your WordPress Menu page. Don't be alarmed! This documentation explains why these Menus exist, how they're organized and structured, and how you can apply the same logic to organize Menus on your own medium to large-scale websites.
The three main Menus
Once you've imported Demo Contents, Uncode's three primary Menus are, screenshot :
- Main [Classic]: This is a standard WordPress Menu, recommended as a reference for all users who don't need advanced Megamenus or custom Mobile Menus. This was the Menu that Uncode has used for several years, which is visible in this demo. It already offers a simple Megamenu version with multiple dropdown levels and a default mobile version.
- Main [Megamenu]: This is the primary Menu for horizontal Menu layouts visible in the Uncode's main demo, created with various advanced Megamenus using Page Builder elements and Content Blocks.
- Main [Composite]: This is the Composite Menu used for the Mobile Menu of the Uncode's main demo on mobile, created using Menu Composite functionality. This Menu is used across all homepage demos through different Content Blocks that modify its appearance and presentation. This Menu is also used in this demo to show that a Composite menu can also be used for simple desktop Menus.
Connection between Main [Megamenu] and Main [Composite]
Main [Megamenu] and Main [Composite] are both composed of the same Menu fragments. This means that any modification to a Menu item within a fragment is automatically propagated to both Menus, keeping them "connected" and synchronized.
The key difference lies in how these Menu fragments are used:
- Main [Megamenu]: Uses the Menu fragments through Content Blocks and the Menu Block module to arrange different Menus in various layouts and Columns, creating complex multi-column desktop navigation, screenshot ;
- Main [Composite]: Uses the same Menu fragments but connects them directly within the Menu Editor to create a single unified Menu structure, typically used for mobile navigation, screenshot .
This shared-fragment approach is what makes centralized management possible — update once in the fragment, and both desktop Megamenus and mobile Menus reflect the change automatically.
Menu Fragments explained
Most of the Menus you see in the Menu page after a Demo Import are Menu fragments primarily used by the Main [Megamenu]. A single Megamenu, due to design requirements, can be composed of multiple separate Menus positioned through the Page Builder — for example, arranged in different Columns or layout positions, screenshot . This modular approach allows for complex, multi-column Megamenu designs where each section can be independently managed and updated.
Naming convention
Let's look at a practical example. All Menus beginning with "Main" are fragments of the "Main [Megamenu]", screenshot .
For instance, the Menu "Main → Features → Highlights" indicates that it's a fragment of the Main Menu, used by the Features Menu item, specifically in the Highlights section, screenshot .
Similarly, the Menu "Features [Megamenu]" is used on the dedicated Megamenu features page. Inside this Menu, you'll find fragments like "Features → Saas → Workflow", which appears specifically in the Workflow section of that page, screenshot .
This naming convention makes it intuitive to organize very complex Megamenus built from multiple Menu fragments.
Composite Mobile Menu
When importing Demo Menus, it's essential to understand "Main [Composite]". This Menu is composed of other Menus directly within the Menu Editor itself — a unique Uncode feature called Menu Composite that allows you to create a Menu from fragments of other Menus right in the Menu Editor page, screenshot .
While Megamenus use Menu fragments within Content Blocks through the Menu Block module, the Menu Composite function lets you combine different Menus directly in the Menu Editor before they're even displayed. Through this function, we've unified all the fragments used by the various demo Megamenus into a single Menu that's then used by Uncode's Mobile Menu with Content Blocks to present all Menu links.
Here's where this system becomes incredibly powerful: when you need to modify a link, the change is visible in both the Megamenu and the Mobile Menu because both use the same fragment. For medium to large websites, this becomes an invaluable tool for managing and scaling desktop and mobile Menus — especially when you want to present the mobile Menu with a completely different layout than desktop, as in our demo, where complex Megamenus transform into clean accordion Menus on mobile.
Update once, change everywhere. This single-source-of-truth approach eliminates the maintenance nightmare of keeping multiple Menu structures synchronized.
Secondary and specialized Menus
In the Menu page, you'll also find these specialized Menus:
- Features [Megamenu]: Menu used by the Megamenu page in Uncode's demo, featuring numerous Megamenu examples.
- Features → About, Features → Ads → Connect, etc: All the Menu fragments that compose the various Megamenus on the Megamenu features page.
- Secondary: Various complementary Menus including CTA Menu, One-Page Menus, Top-Bar Menu, and others.
Comments
0 comments
Article is closed for comments.