Navigation Menu

< All Topics

Creating a horizontal or a vertical menu using our Navigation Menu Widget is a breeze. It helps you create an awesome looking menu navigation for your website in no time.

A Menu Navigation is a crucial component of your website which your visitors see when they land on your website. So, it should be easy to navigate for your users and less confusing.

Pro tip
Keep the navigation menu simple and less confusing. Don’t jumble up the menu structure by adding too many nested menu items to create a negative user experience.

How to use the Navigation Menu Widget of The Plus Addons For Elementor

The Navigation widget comes with 3 different layout styles to choose from. Let’s understand how to use this widget in the tutorial below.

Table Of Contents

General Steps

Search for the Navigation Menu widget from the Elementor screen in the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Navigation Bar

Menu Direction

We have provided you with 3 unique menu options to choose from.

  1. Horizontal Menu
  2. Vertical Menu
  3. Vertical Side Menu

Select Menu

Select your desired menu from the dropdown. (Note: You have to first create your menu under Appearance > Menu)

How to Select Menu in the Navigation Menu Widget.

Menu Hover/Click

This option lets you set the behaviour of your submenu. You can select any one of the following options from the dropdown.

Hover Submenu: It means the submenu will be displayed upon hovering the menu.
Click Submenu: It means the submenu will be displayed by clicking the menu.

Menu Effects

Set any one of the desired submenu dropdown animation effects from the dropdown.

Extra Options

There are some special options to look into.

Alignment

Set the position of your menu using the icons. You can set it to left, center or right.

Sticky Menu

Slide the toggle button to Show to enable the sticky menu option. This will make your menu sticky to the top when you scroll down the page.

Mobile Menu

Responsive Mobile Menu

Slide the button to Show to enable this option. It will present advanced options to make your menu responsive.

Menu Type

Select your desired menu type. The options are:

Toggle: Shows a hamburger toggle icon to open and close the menu.
Swiper: Swipe your menu from left to right or vice versa.

Open Mobile Menu

Set the mobile responsive breakpoint. Use the slider to set your desired value.

Navigation Alignment

Set the position of your menu in mobile using the icons. You can set it to left, center or right.

Menu Content

Select your menu content from the dropdown. It can be a normal WordPress menu or a Saved Elementor Template.

Select Menu

Select your desired menu from the dropdown for mobile.

Mobile Click Close Menu

Slide the button to Show to enable closing the mobile menu on click.

2. Style

Main Menu

Set the typography of your main menu here. Apart from that, you can also set cosmetic options such as Padding, Indicator Style, Color, Border Radius, Background and Box Shadow options.

Sub Menu

Very similarly as explained above, set cosmetic options for the submenu.

Main & Sub Menu Label

Set the typography, Horizontal/Vertical offset, Padding, Color, Border Radius, Background and Box Shadow options.

Mobile Menu Label

Just like the above options, you can set it for the Mobile Menu Label.

Extra Options

Select your main menu hover style. Based on your selection, you will have to choose the border normal / hover color, border width, and alignment border adjust settings. You can also set animation effects for your submenu using the toggle buttons below.

3. Advanced

Advanced Options are a common option for almost all widgets. So, we have written a detailed tutorial on how to use these options.

View Advanced Tab Tutorial

Do you want to rate this article?
1.3 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 50%
1 Stars 50%
How can we improve this article?
Need help?