Uncode 2.11 introduces the ability to create Overlay and Off-Canvas Menu content using Content Blocks, providing complete creative freedom over the design and elements within your navigation overlay experience. It's important to understand that Content Blocks define the content of an Overlay Menu, not the Menu layout itself. Before implementing Overlay Menus with Content Blocks, familiarize yourself with how to configure Menu layouts through the dedicated Theme Options:

• Theme Options → Menu

Demo examples

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

• Features - Overlay Menus

How it works

Creating an Overlay Menu with Content Blocks involves designing a custom Content Block that defines your overlay navigation content. This approach provides the same creative freedom you have with Megamenus and Mobile Menus, now extended to Overlay and Off-Canvas navigation patterns.

To create an Overlay 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 Overlay Menu

Add the desired elements for your Overlay 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 Overlay Menu and we want it to cover the entire viewport height, screenshot ;
2. Then apply the Middle option to the Column container, since we want all the groups to be middle-aligned, as this is a popular Overlay Menu pattern, screenshot ;
3. Insert elements such as the Menu Block module to display your navigation structure, screenshot ;
4. Insert an Inner Row that contains a Text Block module and a Button module, screenshot ;
5. Although not strictly necessary, we will also add another Row with Fixed positioning at the Bottom, where we will add other elements to balance the layout, such as the link to the Privacy Policy, Social Icons, and Copyright, screenshot ;
6. We can now preview our Overlay Menu, screenshot .

Use the Content Block as an Overlay Menu

Select this Content Block in Theme Options → Navbar → Menu → Menu Content Block. When this Content Block is specified, it will be used as the Overlay Menu content, inheriting styles like Font Family from Theme Options unless specified differently within the module itself (Please note that this option becomes visible when one of the Overlay, Off-Canvas, or Lateral menus has been selected), screenshot .

Import Menus Layouts

If you want to use one of the Overlay Menu Content Blocks featured in our demos, you can import them through a full Demo Import or via Selective Import. In the Content Blocks list, you'll find the following pre-built Overlay and Off-Canvas Menus. For easier identification, each Menu uses the same name as its corresponding demo: 

Menu Overlay | Creative Designers, Menu Overlay | Creative Director, Menu Overlay | Creative Foundry, Menu Overlay | Creative Freelance & Portfolio Developer, Menu Overlay | Creative Marketing, Menu Overlay | Creative Photographer, Menu Overlay | Creative Studio, Menu Overlay | Default Dark, Menu Overlay | Default Light, Menu Overlay | Portfolio Atelier, Menu Overlay | Portfolio Studio, Menu Overlay | Shop Minimal, Menu Overlay | Shop Wines, Menu OffCanvas | Creative Event, Menu OffCanvas | Creative Product, Menu OffCanvas | Creative Prototype, Menu OffCanvas | Shop Landing 

These professionally designed Menu Content Blocks serve as perfect starting points for your projects, offering a variety of styles and layouts that you can customize to match your brand and design requirements.

Wireframes

The Wireframes plugin provides pre-designed Overlay Menu templates and patterns, enabling rapid implementation of professional Overlay navigation systems. Within the Wireframes selection window, you'll find a dedicated "Overlay Menu" tab featuring different Wireframe options. When using the Wireframes plugin, Wireframe Menus 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 Overlay 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 Overlay Menu context by their nature (Row Animations, Scroll Trigger, Color Changer, etc.).