Kadence Tutorial: Creating Flexible Navigation Structures with Kadence Advanced Navigation Blocks

Kadence Blocksis a powerful page builder that provides users with a rich set of customizable blocks. Among them, the Navigation Adv Block is designed for use in theWordPressAn important module designed for building flexible navigation menus in the editor, which not only supports the classic site architecture, but also adapts perfectly to the Full Site Editor (FSE) mode.

This article will take you through a comprehensive overview of advancednavigatorWhat the blocks do, how they are set up, and how they can be used in concert with the advanced header blocks to help you achieve highly customizable navigation menus in your website.

I. Overview of the advanced navigation block

The advanced navigation block isKadencePart of the advanced header system that works in tandem with the header (Adv) block and the navigation links block. You can add navigation anywhere on a page or template, not limited to the header area.

Navigation is fine:

• Add and configure directly in the block editor
• Centralized management from the Kadence dashboard
• Support for importing and converting classic menus into advanced navigation structures

II. How to add and manage advanced navigation

Creating navigation in the editor

You can insert the "Navigation (Adv)" block in the page editor and select an existing navigation or create a new one from the popup options. Once added, you can immediately access the navigation builder to add pages, categories or custom links.

Manage navigation in the back office

pass (a bill or inspection etc) WordPress Dashboard → Kadence → NavigationsYou can centralize the management of all creatednavigatorClick on "Add New Kadence Navigation" to create a new navigation. Click "Add New Kadence Navigation" to create a new navigation.

Navigation builder support:

• Add articles, pages, products or other custom types
• Generate menu items using categories (e.g. article categories, product categories)
• Drag-and-drop sorting and hierarchies

Third, support import WordPress classic menu

KadenceIt is possible to combine the existing classicWordPressMenu import for advanced navigation. After importing, the original menu is not modified, but is automatically converted to an advanced navigation menu for further visual and interactive enhancement settings.

Fourth, navigation settings in detail

General Settings

• Select navigation: Toggles the currently displayednavigatorelement
• Create new navigation: Create new navigation and editing directly in the block

• Open the builder: Click for quick access to the navigation builder

• menu orientation: Supports landscape or portrait orientation
• menu spacing: Horizontal and vertical navigation item spacing can be adjusted separately

• Parent activation item highlighting: Automatically highlights parent menu items when a child page is visited

Layout Options

• horizontal layout: Supports standard, stretched, grid
• vertical layout: Expand/collapse behavior can be enabled, allowing menu items to expand in an accordion fashion

Horizontal Layout Settings

When using horizontal layouts, you can choose from three layouts - standard, stretched, and grid - each offering different presentation effects and optimization settings:

Standard Layout

The standard layout is suitable for traditional style navigation menus, where a fixed spacing will be maintained between the navigation items, and is suitable for simple menu layouts.

Tensile Layout

Stretch layouts extend the navigation items evenly across the entire width of the container, resulting in a more even distribution of menu items.

Stretching behavior::

• (an official) standard: Add space between navigation links to evenly distribute menu items across the available space.

• Fill and center: Adjust the text area by increasing the spacing to center align the text of each navigation item. The text alignment settings can be further customized in the style block settings of the navigation item style.

Grid Layout

Grid layout arranges navigation items in a structured grid, providing a more organized form of navigation menus.

• Horizontal grid columns: Specify the number of columns in the grid and the navigation links will be aligned within the defined columns and flow from left to right in a grid fashion.

These layout options give you the flexibility to adjust the appearance and behavior of the navigation menu to suit different design needs.

Vertical Layout Settings

When using a vertical layout, theKadence The Advanced Navigation block provides the following two useful features for enhancing the user interaction experience:

Expand vertical sub-menus throughout the project

When this option is enabled, users can click on the entire width of a vertical menu item to expand the submenu, not just the text or icon area.

Collapse Vertical Submenu

This option will set the vertical submenu to "accordion"Way to show.

These two settings can be used independently or in combination to effectively improve the usability and visual hierarchy of vertical navigation.

V. Anchor link activation function

Support anchor links to become active automatically when scrolling to the target area. You can set the activation offset to match different layouts and fixed header heights for more precise activation.

VI. Appearance Style Settings

Style Templates

• standard form

• Underline Style

• Full height style

• Full height underline style

Link Style

Support forRoutine, Hover, ActivateThree states set the color, background, border, rounded corners, shadow and other styles.

font setting

Global settings for menu item font size, line height, font weight, font spacing, letter case, etc. Overrides can also be made for individual navigation links.

Separator Setting

Inserts separators between menu items with adjustable color and width.

VII. Submenu and Mega Menu Style (Pro)

Submenu container settings

• Selection of submenu appears animated (fade in, fade up, etc.)

• Setting dropdown menu alignment and width

• Customize fonts, colors, spacing, borders, shadows, etc. for submenu items

Submenu link settings

The styling of submenu links helps you to uniformly control the appearance of all drop-down menu items in the advanced navigation in the following ways:

color

Setting the color for the navigation links in the submenu supports independent settings for the following three states:

• normal state
• hovering state
• active status

divider

Add a separator line between each sub-menu item to improve hierarchy and readability. You can customize the color and width of the divider.

Link padding and margins

Uniformly set the inner and outer margins of the navigation links in the submenu to ensure consistent content spacing and make the menu look neater and more organized.

alignment

Sets the text alignment of submenu items, optional:

• left justification

• center alignment

• right-aligned

This setting can be configured separately for different device types to enable responsive design.

typographical

Fine-tune the text style of sub-menu items, including:

• font size
• your height (honorific)
• Letter case (e.g. all capitals)
• Font families (e.g., system fonts, custom fonts)
• thickness of font
• letter spacing

These settings help you build a visually unified, interactive and friendly submenu system, which is especially suitable for multi-tier menus or website navigation designs that need to display subitems aesthetically.

Submenu description style setting

The submenu describes theStyle SettingsAllows you to adjust the appearance of navigation link descriptions to harmonize with the content of the main menu items and enhance the user experience. Specific settings include:

tab spacing

Adjust the spacing between the navigation labels and the description text to make the typography between the description and the labels clearer and more comfortable.

color

The Setup submenu describes the colors in different states and supports the following three states independently:

• normal state
• hovering state
• active status

typographical

Adjust the font style of submenu descriptions, including:

• font size
• your height (honorific)
• Alphabetical case (e.g., auto-capitalization)
• Font family (e.g., select custom fonts)
• thickness of font
• letter spacing

Top level navigation description styling

You can also adjust the topnavigatorThe description style in the block (Advanced Header Block), which again helps to improve the overall design consistency and readability of the site.

tab spacing

Set the spacing between the top navigation link labels and the description text to ensure that they remain properly separated visually.

color

Sets the color for the top-level navigation link description, which supports the following states:

• normal state
• hovering state
• active status

typographical

Adjust the font style of the top level navigation description:

• font size
• your height (honorific)
• capitals and lower case letters
• Font Series
• thickness of font
• letter spacing

These description style settings help you better control the appearance and spacing of the text in your navigation links, making the entire navigation system cleaner, more readable, and more design-oriented.

VIII. Advanced customization options

• Adding margins and inner margins to entire navigation blocks or individual link items

• Setting HTML anchors (#ID)

• Add CSS classes to support custom styles

IX. Managing advanced navigation

You can easily manage all the advanced navigation on your website by:

• Access to the Dashboard: in WordPress In the dashboard, click Kadence Menu.
• Select navigation page: Under the Kadence menu, select navigator Page.
• Edit, create or delete navigation::
  • Editorial navigation: You can select the existing advanced navigation to edit and adjust.
  • Create new navigation: click "Add New Kadence Navigation" button to create a new advanced navigation.
  • Delete navigation: If you no longer need a navigation, you can delete it from the navigation list.

This admin page allows you to centrally manage all advanced navigation for easy modification and optimization.

summarize

KadenceAdvanced Navigation Block not only enhances the beauty and functionality of the navigation menu, but also completely frees you from the limitations of traditional menu settings. Whether you are creating a single-page scrolling website or a complex multi-tier e-commerce platform, using advanced navigation blocks can make your design more flexible and interaction smoother.

If you need to further customize the style, you can also combine Kadence Custom Fonts plug-in, custom CSS and other ways to achieve more advanced design effects.

It is recommended that in-depth studies be conducted in conjunction with the following:

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off