Nav Menu

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 Nav Menu Widget ?

To activate the Nav Menu widget, follow these steps:

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Nav Menu widget in the list.
3. 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.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

Here’s the interface where you can configure the settings and customize the GSAP DrawSvg Widget across various tabs. 

Here’s the interface where you can configure the settings and customize the Nav Menu Widget across various tabs. 

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

Two options are available: Menu Settings and Mobile Menu Settings.

Menu Settings

I have chosen the Main Menu as the menu for my design.

• Choose a submenu indicator, set the layout to horizontal, and adjust the menu alignment—that’s it!

Mobile Menu Settings

• In Mobile Menu Settings, I have selected the hamburger icon for the menu. You can choose a mobile icon from the icon library or upload a custom icon as per your design.

• Additionally, set the breakpoint according to your preferred layout for a responsive menu experience.

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

Customized the divider element in my design. Here’s a summary of your settings:

• Gap between dividers: Set the desired space between the dividers.
• Border Type: Groove
• Border Width: 3px
• Padding: 20px
• Border Radius: 3px

These settings will give your divider a groove border style, with padding and rounded corners to match your design preferences.

Desktop Submenu Item

Desktop Submenu Item refers to the styling options for submenu items that appear when hovering or clicking on a main menu item in desktop view. It allows customization of the submenu’s appearance on desktop devices.

• I have adjusted the width, border type, border width, wrapper border radius, and customized the submenu items to fit my design.

Submenu Indicator

The “Submenu Indicator” refers to the small icon or symbol that appears next to a menu item, indicating that it has a dropdown submenu.

• So, I have adjusted the font size and margin to match my design preferences.

I didn’t change the rest of the tools as they weren’t needed for my design. However, you can explore options like Mobile Menu, Hamburger, Mobile Menu Close, and Mobile Menu Back to enhance your 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.