The Menu Block module, introduced in Uncode 2.10, is specifically engineered for creating advanced Menu items within Megamenu Content Blocks and Mobile Menu Content Blocks. While primarily developed for navigation purposes, this versatile module can also be utilized within page content or for crafting sophisticated footer Menu structures.

The Menu Block module displays Menus up to three levels deep and serves dual purposes: creating advanced desktop Menus with Icons, Images, Descriptions, and Badges organized in flexible Columns, screenshot , as well as generating accordion-style Menus typically used for mobile navigation, screenshot . This adaptable module enables the creation of a wide variety of Menu presentations from a single WordPress Menu structure.

Dedicated settings in Menu Editor

To fully harness the Menu Block module capabilities, Uncode enhances the standard WordPress Menu Editor with new customization options specifically designed for advanced Menu display. These options integrate seamlessly with the Menu Block module and provide consistent styling across your entire navigation system, screenshot :

• Media: Upload an image or SVG file to accompany Menu items;
• Icon: Select icons from Uncode's comprehensive icon library;
• Icon Color: Define custom colors for Menu icons (note that this will not apply the color if you use an SVG as Media, but only to the icons that are part of the Uncode Icon Library);
• Icon Background: Add background colors to Media or Icons when specified by the module settings.

Menu Block module options

The Menu Block module organizes its functionality across nine main configuration tabs. The following sections cover the most important options and those requiring detailed usage explanations.

General

• Menu: Connect any WordPress Menu to the module. Note that Menus cannot exceed three levels (Parent → Child → Child) - this is the maximum indentation limit. Additionally, Menus containing Content Blocks are not accepted within the Menu Block to prevent recursive nested Content Block loops, which could potentially create infinite Menu structures within infinite Content Blocks.
• Columns: Configure the number of Columns for Menu display. You can set from single to multiple columns, screenshot . Values can be responsive across three breakpoints (desktop, tablet, mobile). For example, a Menu can display 4 Columns on desktop, 3 on tablet, and 1 on mobile by entering "4,3,1", screenshot . These utilize CSS Grid layouts flowing left to right, not vertical stacking, before moving to new Columns.
• Columns Gap: Sets horizontal spacing between Columns according to Uncode's grid spacing values, enabling alignment with other grid elements.
• Column First Level: Determines whether Columns apply to the deepest Menu level, or to the top-level items. With this option enabled, the Columns are applied to the Titles level, screenshot .

Collapsible

With these options, it's possible to transform horizontal Menus into vertical accordions. You can enable this behavior either on desktop for creating expandable Menu sections or as mobile-only behavior for touch-optimized navigation.

• Collapsible: Transforms horizontal Menus into vertical accordions, either on desktop for creating expandable Menu sections or mobile-only behavior, screenshot .
• Collapsible Icon and Icon Close: Choose whether you want to display icons for when the Menu is closed and when it's opened. This provides visual feedback for the accordion state.
• Icon Min-Width: Defines the minimum space occupied by the icon. This can be useful for aligning icons across different Menu levels when they have different sizes, ensuring visual consistency by centering them within the defined space.

Items

The Items tab defines styling options for the deepest Menu level - elements without child items. Typography options follow standard Uncode conventions.

Titles

The Titles tab configures styling for parent Menu items. These elements can have completely different styling from child items, such as heading-style formatting, screenshot , or simply enhanced styling to indicate hierarchy.

• No Link Title: Removes links from title elements (only visible when Menu is not collapsible, as collapsible Menus automatically remove links since clicks are reserved for Menu expansion).
• Font Size Nested: Defines font size for titles beyond the first level.

Spacing

The Spacing tab contains options that define spacing between the various elements that compose Menu item lists and their Titles. Consider these as the spacing controls you can apply to HTML lists (ul, li). We recommend using flexible and fluid CSS units like clamp() or em so they can scale responsively.

• Items (all): Sets the vertical spacing rhythm between all elements in a Menu list. Default value is 9px.
• First Parents: Defines the top margin applied to first-level Parent elements relative to any preceding element.
• Nested Parents: If a second level of nested Parent elements exists beyond the first level, this defines the top margin applied to these nested Parent elements relative to any preceding element.
• Items Lists Gap: Sets the top margin applied to Menu items relative to their Parent element.
• Nested Lists Gap: If a second level of nested elements exists, this defines the top margin applied to nested items relative to their Parent element.
• Indentation: Available only for Collapsible Menus, this option defines the indentation rhythm between different list levels. Useful for establishing visual hierarchy in Vertical and Mobile Menus.

Media & Icon

This tab configures styling options for icons and media (images) associated with Menu items. Most options are self-explanatory in their function.

• Replace: Apply icons or media to all Menu elements universally. Useful for adding decorative elements like arrows or consistent visual indicators to all items.
• Icon and Media Size: Icon Size applies to both icons and media as the primary value, while Media Size applies exclusively to media elements. This dual-option system enables fine-tuning when Menus contain both icons and media (technically different elements) requiring different sizing.

Extra

This tab contains additional secondary options such as Slug, Badges, Extra Class, and Hook ID:

• Use Slug: When enabled, this option references the Menu in the General tab by Slug (name) instead of ID (number). Demo Contents are configured using Slugs because it's the only reliable way to reference Menus correctly during Demo Import (also useful for exports). However, we recommend disabling this option and using IDs instead, as they provide a more dynamic workflow — allowing you to rename Menus freely and ensuring better compatibility with multilingual plugins.
• Hook ID: This option can be used by developers as a reference parameter for the "uncode_menu_block_nav_menu_id" filter, useful for advanced customizations and modifications.

Options inheritance

The Menu Block module, unless explicitly overridden by its own settings, inherits options configured in Theme Options → Customize → Menu. This means that if you don't modify the module's typography options, the general Menu styles will be automatically applied.

While the module provides more granular, direct, and specific controls, this inheritance system makes managing and scaling multiple Menus—such as different Megamenus—significantly easier. You can establish global styling rules once in Theme Options, then only customize specific instances when needed.

Important note: You'll only be able to see the inherited settings when the Content Block is loaded as a Megamenu or Mobile Menu within the proper Menu context. In other words, while creating the Content Block in the Page Builder, you'll see the page body font size and styles rather than the Menu-inherited ones. The inheritance only applies when the Content Block is actually displayed within the navigation context.

Inheritance for Megamenu Content Blocks

When working with Content Blocks to create Megamenus, the same inheritance principle applies to Background and Skins settings. Unless you specify different options in the container Row:

• Background Color: Inherits from Theme Options → Customize → Light or Dark Skins → Primary Submenu Background. This makes sense because a Megamenu is fundamentally a dropdown menu.
• Skin: The primary Skin inherits from Theme Options → Customize → Menu → Primary Submenu Skin.

This inheritance system ensures visual consistency across your navigation while still allowing you to override settings at the individual Menu or Megamenu level when specific designs require it.

Notes

• Recursive structure prevention: The Menu Block module prevents displaying Menus that contain Megamenu Content Blocks to avoid dangerous recursive nested structures. Here's why this limitation exists: if a Menu Block displays a Menu containing a Content Block, and that Content Block contains another Menu Block, which in turn displays another Menu with another Content Block, this creates an infinite loop scenario (Menu Block → Content Block → Menu Block → Content Block → etc.). Such recursive structures could potentially crash the website or severely impact performance by creating endless nested Menu structures. The module can safely display standard WordPress Menus but cannot render Menus containing Megamenus to prevent these potentially dangerous recursive loops.
• Level limitation: Menus cannot exceed three levels (Parent → Child → Child) to maintain usable navigation structure and prevent overly complex Menu hierarchies.
• Link behavior in Collapsible mode: In Collapsible mode, parent item links are automatically removed since clicks are reserved for accordion expansion. This ensures proper mobile functionality where touch interactions must prioritize Menu expansion over navigation.