--- title: "Navigation Menu Lite Widget Settings Overview" url: https://theplusaddons.com/docs/navigation-menu-lite-widget-settings-overview/ date: 2023-10-27 modified: 2026-08-17 lang: en author: "Aditya Sharma" description: "The navigation menu is an essential part of any website — it lets visitors find what they need without confusion. A well-placed, responsive navigation directly reduces bounce rates and keeps..." image: https://theplusaddons.com/wp-content/uploads/2023/10/Navigation-Menu-Lite-Widget_-Settings-Overview-1024x536.jpg word_count: 1047 --- # Navigation Menu Lite Widget Settings Overview ## - The Navigation Menu Lite widget in The Plus Addons for Elementor adds horizontal or vertical navigation to any Elementor page using existing WordPress menus, with dropdown sub-menu control and built-in mobile responsive support. - The widget is best used for business and portfolio websites with a standard horizontal top-bar navigation, documentation or directory sites with a vertical sidebar menu, and sites that need a separate mobile menu at a custom breakpoint. - Responsive Mobile Menu activates below a set breakpoint width, and the post says 768px is the typical mobile breakpoint for switching visitors to the mobile navigation. - Style tab settings separate Main Menu, Sub Menu, and Mobile Menu Style controls, while the Advanced tab covers motion effects, custom CSS, positioning, and visibility rules. The navigation menu is an essential part of any website — it lets visitors find what they need without confusion. A well-placed, responsive navigation directly reduces bounce rates and keeps visitors moving through your content. The Navigation Menu Lite widget in [The Plus Addons for Elementor](https://theplusaddons.com/) lets you add a horizontal or vertical navigation menu to any Elementor page using your existing WordPress menus, complete with dropdown sub-menu control and built-in mobile responsive support. **Best Used For:** - Business and portfolio websites that need a standard horizontal top-bar navigation - Documentation or directory sites that require a vertical sidebar menu layout - Any site that needs a separate, simplified mobile menu at a custom breakpoint ## 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 - **Horizontal and Vertical Menu Layouts** – Display your navigation as a top-bar horizontal menu or a vertical side menu. Use the vertical layout when building a documentation portal, a directory site, or a dashboard-style interface that needs a persistent sidebar. - **Dropdown Sub-Menu Behavior** – Control whether dropdown sub-menus open on hover or on click. Use the click option for touch-friendly navigation where hover events do not work consistently on mobile devices. - **Mobile Responsive Menu** – Toggle on a dedicated mobile menu that activates below a custom viewport breakpoint, so the desktop navigation switches automatically to a compact mobile layout. - **Mobile Menu Content Types** – Use a standard WordPress menu or an Elementor template as your mobile navigation. The Template Menu option (Pro) lets you build a fully custom mobile navigation with images, icons, and custom layouts. ## How to Use the Navigation Menu Lite Widget in Elementor? Add the Navigation Menu Lite widget to your site header template so the menu appears across every page. To build a header template, use the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or Elementor Pro if you are already using it. Before using the widget, [create a menu in WordPress](https://codex.wordpress.org/WordPress_Menu_User_Guide) under **Appearance → Menus**. If you need advanced navigation features such as mega menus, sticky behavior, and dropdown icon control, see the [Navigation Menu Widget Settings Overview](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/) for the Pro version of this widget. ### Navigation Bar From the **Menu Direction** dropdown, select the orientation of your navigation menu. You have three options. **Horizontal Menu** – To create a left-to-right top-bar navigation. Use this for standard website headers where the menu sits across the top of the page. **Vertical Menu** – To [create a vertical navigation menu](https://theplusaddons.com/docs/create-a-vertical-navigation-menu-in-elementor-for-free/). Use this when building a sidebar navigation for documentation sites, directories, or pages with persistent left-panel navigation. Select the option that fits your layout. ![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, select the WordPress menu you want to display. This list shows all menus created under **Appearance → Menus**. From the **Menu Hover/Click** dropdown, select how dropdown sub-menus open for your visitors. **Hover Sub-Menu** – To [open the dropdown menu on hover](https://theplusaddons.com/docs//open-elementor-submenu-dropdown-on-hover-for-free/). Use this on desktop-focused sites where visitors navigate primarily with a mouse. **Click Sub-Menu** – To [open the dropdown menu on click](https://theplusaddons.com/docs//open-elementor-submenu-dropdown-on-click-for-free/). Use this when your audience includes touch-screen users, or when you want sub-menus to stay closed until a visitor intentionally opens them. Select the option as per your requirement. Then, from the **Menu Effects** dropdown, select a transition animation for the dropdown menu as it appears. ### Extra Options From the **Alignment** section, align the menu items to the left, center, or right within the navigation container. This is useful when the Navigation Menu Lite widget sits inside a wider column and you need the menu to stay centered on the page. ### Mobile Menu  Enable the **Responsive Mobile Menu** toggle to add a dedicated mobile menu that activates at a set breakpoint width. ![navigation menu lite mobile menu](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-lite-mobile-menu.gif) In the **Open Mobile Menu** field, set the minimum screen width in pixels at which the mobile menu activates. Visitors on screens narrower than this value see the mobile menu instead of the desktop navigation. Set this to your site's standard mobile breakpoint, typically 768px. In the **Toggle Style** section, select the visual style for the mobile menu button. Choose a hamburger icon, a text label, or a combination of both depending on your header design. Align the toggle button from the **Toggle Alignment** section. Then, align the mobile menu items from the **Mobile Navigation Alignment** section. From the **Menu Content** dropdown, select what appears when the mobile menu opens. **Normal Menu** – To use a standard WordPress menu as the mobile navigation. **Template Menu** – To use an Elementor template as the mobile navigation. Use this when you need a custom-designed mobile menu with images, icons, or a layout that goes beyond a standard link list. This option requires the Pro version of the Navigation Menu widget. > *Note: The Template Menu option is only available with the pro version of the Navigation Menu widget.* Select **Normal Menu** to use a standard WordPress menu. From the **Select Menu** dropdown, select the menu to display in the mobile navigation panel. For a dedicated full-screen mobile navigation experience designed for touch devices, see the [Mobile Menu Widget Settings Overview](https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/). ## How to Style the Navigation Menu Lite Widget? Go to the **Style** tab to access all visual options for the Navigation Menu Lite widget. **Main Menu** – Controls the visual appearance of top-level menu items, including background color, typography, text color, and dropdown indicator icon size. Adjust these to match your site header's color scheme. ![navigation menu lite style](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-lite-style.png) **Sub Menu** – Controls the styling of dropdown sub-menu panels, including background color, typography, padding, and item spacing. **Mobile Menu Style** – This section appears only when the **Responsive Mobile Menu** toggle is enabled. From here, control the background, typography, and spacing of the mobile navigation panel. **Extra Options** – Controls the hover animation applied to menu items. Set this to complement the **Menu Effects** option you selected in the Content tab. For global widget settings such as motion effects, custom CSS, positioning, and visibility rules, go to the **Advanced** tab. [View Advanced Tab documentation](https://theplusaddons.com/help/plus-extras/).