Create fully customizable navigation menus with advanced features like custom menu items, mega menus, saved template integration, and button-style menu items. This widget is ideal for creating clean, flexible, and visually appealing navigation bars for any website.
Menu#
- Type: You can choose from two types of menus:
- WordPress Menu – Pulls menu items from your existing WordPress menu (Appearance → Menus).
- Custom – Lets you create a menu from scratch directly inside the widget panel, giving you full control over every item.
- Menu Items: When using Custom as the menu type, you can manually add menu items. Each menu item includes the following options:
- Item Type – Choose the type of the item (Menu, Sub Menu).
- Text – Set the text label for the menu item.
- Link – Add a URL or dynamic link source.
- Submenu Width – Control the width of dropdown submenus (equal to container, full width, or custom).
- Submenu Position – Control the position of dropdown submenus (Left / Center / Right).
- Content Type
- Text – Displays a simple text-based submenu.
- Saved Template – Select a previously saved Elementor template to display a Mega Menu inside the dropdown. This allows you to create rich, multi-column layouts, images, widgets, or custom designs as your submenu.
- Last Menu Item: Allows you to make the final item in the menu visually distinct by turning it into a button. This is perfect for CTAs like "Sign Up," "Get Started," or "Contact Us"
- Schema Support: When enabled, the widget outputs proper structured data (
SiteNavigationElement) to help search engines better understand your site structure.
Layout#
Controls the overall structure, alignment, and behavior of your navigation menu.
- Layout: Choose how the menu is displayed:
- Horizontal – Menu items are aligned in a single row.
- Vertical – Menu items are stacked in a column.
- Dropdown – Menu is displayed as an accordion.
- Off-Canvas – Displays the menu in a sliding panel that appears from the side of the screen.
- Alignment: Set the alignment of menu items within the available space.
- Pointer: Add a visual indicator when hovering over menu items:
- None – No pointer effect.
- Underline / Overline / Double Line – Adds a single or double line above or below menu items on hover.
- Framed – Highlights the menu item with a frame or box.
- Text – Changes the text style (such as underline or color) to indicate hover state.
- Show Submenu On: Choose how submenus open:
- Hover – Submenus expand when the user hovers over a parent item.
- Click – Submenus expand only when clicked.
- Submenu Indicator: Configure the indicator icon for items with a submenu.
- Submenu Animation: Control the animation style for submenu appearance.
- Action on Menu Click: Define what happens when clicking a menu item that has a submenu:
- Open Submenu – Expands the submenu instead of redirecting.
- Redirect to Self Link – Navigates to the item’s link.
Responsive#
- Breakpoint: Set the screen size where the menu switches to mobile mode.
- Full Width: Enable or disable full-width menu display on mobile devices.
Toggle Button#
- Show Label: Enable or disable a text label next to the toggle button.
- Label Text: Enter the text to display next to the menu icon (e.g., "Menu").
- Label Position: Choose where the label appears relative to the icon.
- Menu Icon: Customize the icon for opening the menu.
- Close Icon: Choose the icon used to close the menu.