Uncode 2.10 introduces the ability to create mobile Menu content using Content Blocks, providing complete creative freedom over the design and elements within your mobile navigation experience.

It's important to understand that Content Blocks define the content of a mobile Menu, not the Menu behavior itself. Before implementing mobile Menus with Content Blocks, familiarize yourself with the three available mobile Menu layouts (Default, Centered, and Off Canvas) and how to configure them through the dedicated Theme Options.

• Menu Mobile Modes

How it works

Creating a mobile Menu with Content Blocks involves designing a custom Content Block that replaces the standard mobile Menu. This approach emerged from the challenges of adapting complex desktop Megamenus for mobile devices, where traditional responsive behavior wasn't sufficient for sophisticated navigation structures.

To create a Mobile Menu with Content Blocks:

Create a Content Block

Create a new Content Block and save it with a descriptive name. Optionally, for better organization, categorize the Content Block to make it easier to locate later, screenshot .

Design your Mobile Menu

First, note that when working with the Page Builder, you can preview the mobile layout using the responsive preview options. Set this option to enable the mobile view, screenshot .

Add the desired elements for your mobile Menu design within a Row. Let's look at a structured Menu example, but if you already know how to create your design, you can proceed to the next step.

1. First, let's apply 100% Height to the Row because we are creating an Offcanvas Menu and we want it to cover the entire viewport height, screenshot .
2. Then apply the Justify option to the Column container, since we want all the groups to be equally distributed vertically, screenshot .
3. Insert an Inner Row that contains a Toggle module with Absolute position that creates the close (X) button and a Menu Block module with the Collapsible option that uses our main Mobile Menu as the source, screenshot .
4. Then we add another Menu Block for the Help Center links, screenshot .
5. Finally, we add another Row with a Menu Block for Social links, a Divider element, and a Copyright module, screenshot .

Use the Content Block as Mobile Menu

Select this Content Block in Theme Options → Menu Mobile Content Block, screenshot . When this Content Block is specified, it will be used as the Mobile Menu on mobile devices, inheriting styles like Font Family from Theme Options unless specified differently within the module itself, screenshot .

Wireframes

The Wireframes plugin provides pre-designed mobile Menu templates and patterns, enabling rapid implementation of professional mobile navigation systems. Within the Wireframes selection window, you'll find a dedicated "Mobile Menu" tab featuring 17 different Wireframe options. 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

• Page Builder modules support: Please note that each Page Builder element used within mobile Menus with Content Blocks 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 mobile Menu context by their nature (Row Animations, Scroll Trigger, Color Changer, etc.).