Kadence Advanced Navigation Tutorial: Submenu and Mega Menu Creation Explained

In website design, clear navigation can significantly improve user experience and content conversion.Kadence Blocks In the advanced navigation block (Navigation Adv Block) has a powerful navigation building capabilities, suitable for page structure is clear, multi-column classification of the site. In this article, we will introduce the submenu and Mega How menus are created, and style customization methods.

Creating navigation

utilization Kadence 's advanced navigation block to quickly build the main menu. Inserting the Navigation (Adv) After the block, you can select an existing navigation, or create a new navigation structure and go to the visual navigation builder.

If you are using an advanced header template, you can select or create a new navigation by simply clicking on the navigation menu area.

Add navigation links

Navigation builder provides flexible ways to add links. It supports selecting content types such as pages, articles, products, etc. Customized links can also be added manually. Title and link address can be adjusted for each link, and sorting is done by dragging operation.

It is also possible to manually insert a navigation link block by clicking on the toolbar plus sign in the editor and entering the relevant information.

Style uniformity vs. individual customization

The style of navigation links can be set either uniformly or adjusted individually for individual links. In the advanced navigation block settings, basic styles such as font, color, border, background, etc. can be set. The navigation link block itself also includes style overrides to meet more flexible design needs.

Adding sub-menu structure

Submenus are used to add a drop-down hierarchy to the main menu items. Two ways of creation are supported:

• In the navigation builder, select a main menu item and click "Add sub-menu links"

• In the Navigation Link Block toolbar, click the Nested icon to create a subordinate navigation item

It is also possible to form hierarchical relationships by dragging link blocks under other menu items with the help of the list view.

Setting the submenu appearance

Styles of submenus support global and individual settings. Parameters such as background color, spacing, borders, shadows, etc. can be adjusted and display animations (e.g. fading, sliding) can be customized. The description text in the submenu can also be set independently, including font, color and typography.

Adding dividers between menu items helps to improve the sense of visual grouping.

Multi-level navigation structure

In a sub-menu continue to nest the next level of menu items, to build a three or more levels of navigation system. This structure is suitable for sites with more categorized content, such as education, shopping malls, and business service sites.

Multiple levels of navigation can be generated by simply nesting additional navigation link blocks under existing submenu items.

Showcase rich content with Mega menus

Mega The menu is suitable for information-intensive columns, such as product center, column overview and so on. It supports displaying diverse contents such as graphics, icons and buttons.

When a navigation link block is selected and the Mega menu function is enabled, you can choose to start with a blank space or use a preset template for layout. Supports insertion of any Kadence Blocks such as column layouts, headers, images, buttons, etc.

You can manually control the width of the Mega menu to fit your design requirements.

Quick layout using preset templates

Kadence provide multiple Mega Menu templates (e.g., types A through G) with built-in content structure can be used by simply replacing text and images.

These templates are suitable for common page structures such as mall categories, company departments, service modules etc.

Combined use of sub-menus and Mega menus

A navigation system in which some menu items use submenus and some use the Mega menus, is a very common layout. Example:

• "offerings"Menu Usage Mega menu displays multiple series of graphic links

• The "Service Support" menu lists contact information, FAQs, etc. using a common drop-down menu.

These two structures can be freely combined in a navigation, flexible response to different page requirements.

Migrating Mega Menu Content in Kadence Themes

If you have previously used the Kadence Elements Created Mega menu content, which can also be copied for use in the new advanced navigation.

go into Kadence → Elements, edit the corresponding content, use the list view to select the block in full and copy it. Go back to the Advanced Header Navigation, check the link item that opens the Mega menu, paste the copied content and complete the migration.

summarize

Kadence Advanced Navigation Blocks provide powerful navigation organization for single or multi-level structural needs. Whether it's a basic drop-down navigation or a graphical multi-column Mega menu, it can be quickly built and flexibly styled with the visual editor.