--- 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 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 ## Key Takeaways - Navigation Menu Lite widget from The Plus Addons for Elementor allows users to add horizontal and vertical menus. - Users can create a mobile-friendly menu by enabling the Responsive Mobile Menu toggle. - The Navigation Menu Lite widget provides options for menu direction, including horizontal and vertical selections. - Styling options for the Navigation Menu Lite widget include adjustments for main menu items, sub menus, and mobile menu styles. 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/) ## Frequently Asked Questions **Q: How do I activate the Navigation Menu Lite widget in Elementor?** A: To activate the Navigation Menu Lite widget, navigate to The Plus Addons u2192 Widgets in your WordPress dashboard. Search for 'TP Navigation Menu Lite' and toggle it on. This step is crucial to ensure the widget is available for use in your Elementor projects. **Q: What are the options for dropdown menu behavior in the Navigation Menu Lite widget?** A: The Navigation Menu Lite widget offers two options for dropdown menu behavior: 'Hover Sub-Menu' and 'Click Sub-Menu'. Choosing 'Hover Sub-Menu' opens the dropdown when the user hovers over the menu item, while 'Click Sub-Menu' requires a click to reveal the dropdown. This flexibility allows you to tailor the user experience based on your site's design. **Q: What common mistakes do users make when setting up the Navigation Menu Lite widget?** A: A common mistake is not activating the widget before trying to use it in Elementor. Users often overlook the activation step in The Plus Addons u2192 Widgets section. Additionally, failing to create a menu in WordPress before adding the widget can lead to confusion, as the menu won't display without a pre-existing setup. **Q: What styling options are available for the mobile menu in the Navigation Menu Lite widget?** A: The mobile menu styling options become available when you enable the Mobile Menu feature. You can customize the mobile menu's appearance, including the toggle style and alignment of menu items. This ensures that your mobile navigation is not only functional but also visually aligned with your site's design. **Q: How does the mobile menu toggle work in the Navigation Menu Lite widget?** A: The mobile menu toggle allows you to specify the minimum width for activating the mobile menu. You can also choose the toggle style and align the toggle button. This feature is essential for ensuring that your navigation adapts well to different screen sizes, enhancing the user experience on mobile devices.