Nav Menu

Before setting up the Nav Menu Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Nav Menu Widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Nav Menu widget creates a responsive menu, organizing links with easy customization.

Key Use Cases for the Nav Menu Widget

The Nav Menu Widget in Elementor is ideal for:

• Navigation – Create a clear and easy-to-use navigation menu.
• Multi-Page Websites – Organize links to different pages, categories, or custom URLs.
• Responsive Design – Ensure the menu adapts across devices for a seamless user experience.
• User Experience – Offer a smooth and intuitive way for users to navigate your site.
• Customization – Customize the layout, style, and positioning of your menu to match your site’s design.

With the Nav Menu Widget, you can easily build and customize a navigation menu to suit your website’s needs.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Nav Menu Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Nav Menu Widget in the list.
• Toggle it on to enable the widget.

How to Add the Nav Menu Widget in Elementor

1. Open the page where you want to add the Nav Menu.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Nav Menu.”
4. Drag the Nav Menu widget to your desired section.
5. The Nav Menu widget will now be available for customization.

You can organize your menu items, customize the layout, and adjust the alignment for a seamless navigation experience.

How to Configure Nav Menu Widget

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

How to Add the Nav Menu Widget in Elementor

Enable the widget, create a new page, set a title, choose the Elementor Full Width template, and publish it. Adjust options as needed.

• In the Elementor panel, search for the “Nav Menu Widget.”
• Drag and drop the widget into your desired section.
• Choose your menu from the dropdown, and customize its layout, alignment, style, and responsive behavior using the available settings.

Configuring Nav Menu Widget : A Step-by-Step Guide

Once the Nav Menu Widget is added to your page, you can configure its settings under different tabs: Content, Style and Advanced.

Content Settings

The Content section of the Nav Menu widget includes two main configuration areas:

1. Menu Settings

This panel allows you to select the WordPress menu you want to display. You can also define the layout (Horizontal, Vertical, or Dropdown), align the menu (Start, Center, or End), and control pointer effects, submenu indicators, and spacing for desktop view.

Menu Settings

In the Menu Settings panel of the Nav Menu widget, you can configure the structure and behavior of your navigation menu. Below are the available options:

• Select Menu: Choose a pre-created WordPress menu from the dropdown to display in the widget.
• Submenu Indicator: Enable or disable indicators for items with submenus, helping users identify expandable menu items easily.
  
• Layout: Set the menu orientation to Horizontal, Vertical, or Dropdown, depending on your design requirements.
  
• Menu Alignment: Align the menu items to the Start, Center, or End within the section for optimal placement.
  
• Hover Pointer: Choose how the hover effect appears when a user interacts with the menu. Options include Dot, Underline, Overline, Line Through, and Flip.
  
• Wrap Menu Item: Toggle this setting to control whether menu items wrap to the next line, enhancing layout flexibility for longer items or smaller screens.

2. Mobile Menu Settings

This section helps you customize the appearance and behavior of your menu on mobile devices. You can choose a mobile breakpoint, toggle icons (hamburger/close), define the menu layout (Dropdown or Slide), and set alignment and animation preferences to ensure an optimized mobile experience.

The Mobile Menu Settings section allows you to customize how the navigation menu behaves and appears on smaller devices. Here’s a breakdown of the available options:

• Hamburger Icon: Choose a preferred hamburger menu icon style that appears on mobile devices to toggle the menu visibility.
  
• Mobile Icon: Customize the icon that represents the collapsed mobile menu for a more tailored design experience.
  
• Breakpoint: Define the screen size at which the mobile menu activates. Available options include:
  

• All: Displays the mobile menu on all devices.
• Mobile Portrait: Activates the mobile menu only on portrait-mode mobile screens.
• Tablet Portrait: Triggers the mobile layout on tablets in portrait mode.

These settings ensure your navigation remains accessible, responsive, and visually consistent across all device types.

Style Settings

There will be additional customization options available in the style settings –  including Desktop Main Menu, Desktop Submenu Items, Submenu Indicator, Mobile Menu, Hamburger Icon, Mobile Menu Close, and Mobile Menu Back.

Desktop Main Menu

The Desktop Main Menu Settings section allows you to customize how the navigation menu behaves and appears on desktop devices. Here’s a breakdown of the available options:

Gap: Adjust the space between the menu items for a cleaner, more organized layout.

Border Type: Choose from various border styles for your menu items. The available options include:

• None: No border is applied.
• Solid: A continuous, solid border line.
• Double: A double-line border for a more pronounced appearance.
• Dotted: A dotted border for a unique look.
• Dashed: A dashed border style.
• Groove: A 3D, grooved border effect.

Padding: Customize the internal spacing around each menu item (top, bottom, left, and right) to ensure proper alignment and spacing.

Border Radius: Adjust the roundness of the corners of each menu item for a more refined, rounded appearance.

Animation Styles (Normal, Hover, Active): Customize the behavior of menu items in different states (normal, hover, and active):

• Text Color: Choose the color of the text for each state (normal, hover, and active).
  
• Background Type: Define the background style (color or gradient) for each state (normal, hover, and active).

Desktop Submenu Item

The Desktop Submenu Item Settings section allows you to customize the appearance and behavior of the submenu items in the navigation menu on desktop devices. Here’s a breakdown of the available options: 

Width
Set a custom width for the submenu container to ensure consistent alignment and spacing within your layout.

Background Type
Choose a background style for the submenu wrapper. Options include solid colors or gradients to enhance visual hierarchy and design consistency.

Border Type
Select a border style for the submenu wrapper from the following options:

• None – No border is applied.
• Solid – A single, continuous border line.
• Double – Two parallel border lines for a more pronounced appearance.
• Dotted – A dotted-line border.
• Dashed – A dashed-line border.
• Groove – A 3D grooved border effect.

Wrapper Padding
Adjust the internal spacing around the entire submenu wrapper for better content alignment and spacing.

Wrapper Border Radius
Set the border-radius of the submenu wrapper to control the curvature of the wrapper’s corners.

Submenu Item Settings:

Border Type
Choose a border style specifically for individual submenu items. Available options include:

• None
• Solid
• Double
• Dotted
• Dashed
• Groove

Item Padding
Define the internal spacing for each submenu item to ensure proper alignment and readability.

Item Border Radius
Adjust the curvature of submenu item corners for a polished and modern appearance.

Animation Styles

(Normal, Hover, Active): Customize the visual behavior of submenu items in different interaction states:

• Text Color: Set the font color for normal, hover, and active states.
• Background Type: Define the background style (solid color or gradient) for each state to enhance interactivity and user feedback.

These settings provide full control over submenu styling, allowing for a responsive, elegant, and consistent desktop navigation experience.

Submenu Indicator

The Submenu Indicator settings allow you to customize the visual indicator (such as an arrow) that appears next to menu items with submenus.

Available Options:

• Font Size: Adjust the size of the submenu indicator icon to match your menu’s design.
• Margin: Define the spacing around the indicator to ensure proper alignment and spacing within the menu layout.

These settings help maintain a clear and user-friendly navigation structure.

Mobile Menu

The Mobile Menu settings let you customize how the navigation menu looks and behaves on mobile devices. In the Position section, you can adjust layout and style for a seamless mobile experience.

Position settings let you customize the layout and appearance of the navigation menu on mobile devices, ensuring a smooth and responsive user experience.

Width
Define the width of the mobile menu panel to control how much of the screen it occupies when expanded.

Background Type
Choose a background style for the mobile menu, such as a solid color or gradient, to align with your site’s visual theme.

Typography
Customize the font family, size, weight, and style for mobile menu items to ensure readability and design consistency.

Border Type
Select the border style for the mobile menu container from the following options:

• None
• Solid
• Double
• Dotted
• Dashed
• Groove

Padding
Adjust the internal spacing of the mobile menu container to ensure a clean and well-structured layout.

Animation Styles

(Normal, Hover): Customize the appearance of mobile menu items in different interaction states:

• Text Color: Set the font color for both normal and hover states.
• Background Type: Define the background style (solid or gradient) for both normal and hover interactions.

These settings allow you to create a responsive, user-friendly, and visually appealing navigation experience across all mobile devices.

Hamburger

The Hamburger settings allow you to customize the appearance of the hamburger menu icon on mobile devices, ensuring it aligns with your site’s design.

Available Options:

• Font Size: Adjust the size of the hamburger icon for better visibility and design consistency.
• Border Type: Choose from various border styles (None, Solid, Double, Dotted, Dashed, Groove) to define the icon’s border appearance.
• Border Radius: Set the curvature of the icon’s corners for a rounded or sharp look.
• Padding: Control the internal spacing around the icon for proper alignment.
• Color: Define the color of the hamburger icon to match your brand.
• Background Type: Choose a solid color or gradient background for the icon.

These settings provide full control over the hamburger icon’s design, contributing to a cohesive and user-friendly mobile navigation experience.

Mobile Menu Close

The Mobile Menu Close settings allow you to customize the appearance and interaction of the close icon within the mobile navigation menu, enhancing both functionality and visual consistency.

Available Options:

• Font Size: Adjust the size of the close icon for optimal visibility.
• Border Type: Select from various border styles (None, Solid, Double, Dotted, Dashed, Groove) to style the icon’s border.
• Padding: Define the internal spacing around the icon for balanced alignment.
• Margin: Set the external spacing to control the icon’s position within the menu.

Animation Styles (Normal, Hover):

• Color: Choose the icon color for both normal and hover states.
• Background Type: Set a solid or gradient background for the icon in normal and hover states.

These settings ensure that the mobile menu close icon is both visually appealing and intuitive for users.

Mobile Menu Back

The Mobile Menu Back settings allow you to customize the appearance of the back navigation icon within the mobile menu, enhancing usability and visual consistency.

Available Options:

• Icon: Choose a custom icon to represent the back navigation action.
• Typography: Adjust the font properties if the back button includes text, such as font family, size, weight, and style.
• Padding: Define the internal spacing around the back icon or text for proper alignment.
• Color: Set the color of the icon and/or text to match your design.
• Background Type: Apply a solid color or gradient background to the back button element.

These settings ensure the back navigation control is intuitive, accessible, and visually aligned with the overall mobile menu design.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.