--- title: "Navigation Menu Lite Widget Settings Overview" url: https://theplusaddons.com/docs/navigation-menu-lite-widget-settings-overview/ date: 2023-10-27 modified: 2026-04-10 lang: en author: "Aditya Sharma" description: "The navigation menu is an essential element of any website for a better user experience. It helps users easily navigate through the different pages and content. With the Navigation Menu..." image: https://theplusaddons.com/wp-content/uploads/2023/10/Navigation-Menu-Lite-Widget_-Settings-Overview-1024x536.jpg word_count: 618 --- # Navigation Menu Lite Widget Settings Overview ## - Navigation Menu Lite widget from The Plus Addons for Elementor allows users to add horizontal and vertical menus to their websites. - Elementor FREE Plugin and The Plus Addons for Elementor must be installed and activated to use the Navigation Menu Lite widget. - Mobile Menu feature enables users to create a mobile-friendly menu with options for normal or template content types. - Styling options under the Style tab allow customization of main menu, sub menu, and mobile menu attributes. The navigation menu is an essential element of any website for a better user experience. It helps users easily navigate through the different pages and content. With the Navigation Menu Lite widget from The Plus Addons for Elementor, you can easily add a horizontal and vertical menu to your Elementor website. ## 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. - Make sure the Navigation Menu Lite widget is activated, to verify this visit The Plus Addons → Widgets → and Search for TP Navigation Menu Lite and activate. ## How to Activate the Navigation Menu Lite 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-lite.png) ## Key Features - **Add Different Menus** - You can easily add a horizontal menu and a vertical menu. - **Mobile Menu** - You can easily add a different mobile menu.  ## How to Use the Navigation Menu Lite Widget in Elementor? You should add the Navigation Menu Lite widget to the site header template so you can see the menu 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. To use the Navigation Menu Lite widget, you need to [create a menu in WordPress](https://codex.wordpress.org/WordPress_Menu_User_Guide). ### Navigation Bar 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-navigation-menu-in-elementor-for-free/). Select the option that fits your requirements.  ![navigation menu lite navigation bar](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-lite-navigation-bar.gif) Then, in 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-elementor-submenu-dropdown-on-hover-for-free/). **Click Sub-Menu** - To [open the dropdown menu on click](https://theplusaddons.com/docs//open-elementor-submenu-dropdown-on-click-for-free/). 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 **Alignment** section, you can align the menu items. ### Mobile Menu  By turning on the **Responsive Mobile Menu** toggle, you can make the menu mobile friendly. ![navigation menu lite mobile menu](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-lite-mobile-menu.gif) In the **Open Mobile Menu** section, you can specify the minimum width for enabling the mobile menu. In the **Toggle Style,** you have to select the mobile menu style. You can align the mobile menu toggle button from the **Toggle Alignment** section. Then, you can align the mobile menu items from the **Mobile Navigation Alignment** section. 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. > *Note: The Template Menu option is only available with the pro version of the Navigation Menu widget.* Let’s select the **Normal Menu**. From the **Select Menu** dropdown, you have to select your menu. ## How to Style the Navigation Menu Lite Widget? You’ll find all the styling options under the **Style** tab, to style the Navigation Menu Lite widget **Main Menu** - From here, you can style the main menu item background, typography, color, indicator icon size etc. ![navigation menu lite style](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-lite-style.png) **Sub Menu** - From here, you can style the sub menu. **Mobile Menu Style** - This option is only available when you turn on the Mobile Menu option. From here, you can style the mobile menu. **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/)