---
title: "Navigation Menu Widget Settings Overview"
url: https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/
date: 2023-10-27
modified: 2026-04-10
author: "Aditya Sharma"
description: "The navigation menu is a crucial element of any website, it not only improves the aesthetics of your site but also provides a seamless browsing experience for your visitors by..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/Navigation-Menu-Widget_-Settings-Overview-1024x536.jpg
word_count: 931
---

# Navigation Menu Widget Settings Overview

## Key Takeaways

- The Plus Addons for Elementor offers a Navigation Menu widget that supports horizontal, vertical, and mega menus.
- Users can create a sticky menu by enabling the Sticky Menu toggle in the Navigation Menu widget settings.
- The Navigation Menu widget allows for different mobile menu behaviors, including Toggle, Swiper, and Off Canvas options.
- The widget provides styling options for main menu items, sticky menus, sub menus, and mobile menus under the Style tab.

The navigation menu is a crucial element of any website, it not only improves the aesthetics of your site but also provides a seamless browsing experience for your visitors by allowing them to easily navigate through the different pages and sections of the site.

With the Navigation Menu widget from The Plus Addons for Elementor, you can easily add a horizontal, vertical or mega menu to your Elementor website.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Navigation Menu widget is activated, to verify this visit The Plus Addons → Widgets → and Search for TP Navigation Menu and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=ozRGPdEu9qQ

## How to Activate the Navigation Menu Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu.png)

## Key Features

- **Two Menu Types ** - You can add a normal menu or a custom repeater menu.

- **Add Different Menus** - You can easily add a horizontal menu, vertical menu or mega menu.

- **Sticky Menu** - You can easily add a sticky menu.

- **Mobile Menu** - You can easily add a different mobile menu. 

## How to Use the Navigation Menu Widget in Elementor?

To use the Navigation Menu widget, you should add it in the header template, so the menu is available on the entire website. 

To create the header template, you can use the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or you can use Elementor Pro if you are already using it.

### Layout

In the **Menu Type** dropdown, you have to select the menu type. Here, you’ll find two options - 

- **Default** - To create a menu using the default WordPress menu.

- **Repeater** - To [create a custom menu using a repeater](https://theplusaddons.com/docs//create-a-menu-with-repeater-in-elementor/). 

Let’s select the **Default** option here.

> *Note: To use the Default option, make sure you have created at least one menu in the default WordPress menu section. To check go to ****Appearance**** > ****Menus****.*

From the **Menu Direction** dropdown, you have to select the menu direction. Here, you’ll find three options - 

- **Horizontal Menu** - For creating a horizontal menu.

- **Vertical Menu** - For [creating a vertical menu](https://theplusaddons.com/docs//create-a-vertical-menu-in-elementor/).

- **Vertical SideMenu** - For [creating a vertical side menu](https://theplusaddons.com/docs//create-a-side-mega-menu-in-elementor/).

Select the option that fits your requirement, options will vary based on the option selected. 

Let’s select the **Horizontal Menu** option here.

From the **Alignment** section, you can align the menu items.

### Content

> Note: Options will vary based on the menu type.

From the **Select Menu** dropdown, you’ll find all your menus. Select the menu you want to add.

From the **Menu Hover/Click** dropdown, you can select the dropdown menu behavior. Here you’ll have two options - 

- **Hover Sub-Menu** - To [open the dropdown menu on hover](https://theplusaddons.com/docs//open-dropdown-on-hover-in-elementor/).

- **Click Sub-Menu** - To [open the dropdown menu on click](https://theplusaddons.com/docs//open-dropdown-on-click-in-elementor/).

Select the option as per your requirement.

Then, from the **Menu Effects** dropdown, you can select different effects for the dropdown menu.

### Extra Options

From the **Sticky Menu** toggle, you can [make a sticky menu](https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/).

![](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-extra-options-new.png)

### Mobile Menu 

By turning on the **Responsive Mobile Menu** toggle, you can make the menu mobile friendly.

Suggested reading, how to add [circle menu widget in Elementor.](https://theplusaddons.com/docs//circle-menu-widget-settings-overview/)

From the **Menu Type** dropdown, you can select different mobile menu behaviors. Here, you’ll find three options - 

- **Toggle** - To [create a toggle mobile menu](https://theplusaddons.com/docs/create-a-toggle-menu-for-mobile-in-elementor/).

- **Swiper** - To [create a swiper mobile menu](https://theplusaddons.com/docs/create-a-swiper-menu-for-mobile-in-elementor/).

- **Off Canvas** - To [create an off canvas mobile menu](https://theplusaddons.com/docs//create-an-off-canvas-mobile-menu-in-elementor/). 

Based on the option selected, you’ll see relevant settings.

From the **Navigation Alignment** section, you can align the mobile menu items.

Then, from the **Menu Content** dropdown, you can select the menu content type. Here, you’ll find two options - 

- **Normal Menu** - To use a WordPress default menu as a mobile menu.

- **Template Menu** - To [use an Elementor template as a mobile menu](https://theplusaddons.com/docs//create-a-hamburger-mobile-menu-with-elementor-template/).

Let’s select the **Normal Menu** here.

From the **Select Menu** dropdown, you have to select your menu.

By turning on the **Mobile Click Close Menu** toggle, you can allow users to close the mobile menu by clicking anywhere on the page.

## How to Style the Navigation Menu Widget?

To style the Navigation Menu widget, you’ll find all the styling options under the **Style** tab.

**Main Menu** - From here, you can style the main menu item background, typography, color, indicator icon size etc.

![](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-style-new.png)

**Sticky Main Menu** - This option is only available when you enable the Sticky Menu option. From here, you can style the sticky menu typography, color, indicator icon size, normal and sticky background etc.

**Sub Menu** - From here, you can style the sub menu.

**Description** - From here, you can style the description added in the Repeater item.

**Mobile Menu** - This option is only available when you turn on the Mobile Menu option. From here, you can style the mobile menu.

**Sticky Mobile Menu** - This option is only available when you enable the Sticky Menu option. From here, you can style the sticky mobile menu.

**Main & Sub Menu Label** - From here, you can style the main and sub menu created with the Repeater option.

**Mobile Menu Label** - From here, you can style label added with the Repeater option.

**Extra Options** - From here, you can adjust the menu hover effect.

Advanced options remain common for all our widget, you can explore all it options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

Also read, [8 best mega menu examples + learn how to create them.](https://theplusaddons.com/blog/best-mega-menu-examples/)

## Frequently Asked Questions

**Q: How to edit navigation menu in Elementor?**
A: To edit the navigation menu in Elementor, you can use the Navigation Menu widget from The Plus Addons for Elementor. This widget allows you to select a menu type, such as a default WordPress menu or a custom repeater menu. Make sure to create your menu in the WordPress menu section under Appearance > Menus before using it. This setup ensures that your menu is functional and visually appealing.

**Q: What are the best practices for using the Navigation Menu widget?**
A: When using the Navigation Menu widget, it's best to add it in the header template so that it appears across your entire site. Choose the appropriate menu type based on your layout needs, and consider using a sticky menu for better accessibility. Utilizing the mobile menu options effectively can enhance user experience on smaller screens. Explore the [live widget link](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text) for practical examples.

**Q: What options are available for mobile menus in Elementor?**
A: The Navigation Menu widget offers several mobile menu options, including Toggle, Swiper, and Off Canvas. You can select the desired behavior from the Menu Type dropdown under Mobile Menu settings. This flexibility allows you to tailor the mobile experience to fit your site's design and functionality, ensuring users can navigate easily on their devices.

**Q: How do I make my navigation menu sticky in Elementor?**
A: To create a sticky navigation menu, enable the Sticky Menu toggle in the Extra Options section of the Navigation Menu widget. This feature keeps your menu visible at the top of the screen as users scroll, enhancing accessibility. Remember to style the sticky menu separately to ensure it stands out from the regular menu.