Elementor Nav Menu Widget: No Elementor Pro Needed
Nav Menu is a Master Addons widget that places any WordPress menu in an Elementor header, footer or page and lets you style it from the panel. Choose a horizontal or vertical layout for each device, style the main items, dropdowns and submenus in their normal, hover and active states, and pair it with the Mega Menu extension for multi-column panels. On phones it collapses into a hamburger toggle by default. Master Addons Pro adds the Hamburger layout for any width, with Popup and Offcanvas menus.
Horizontal, vertical and hamburger layouts
Set the layout separately for desktop, tablet and phone. Horizontal suits a top bar. Vertical comes in four types: Normal with side dropdowns, Toggle, Accordion, and Side, which pins the menu to the edge of the page. Phones use the hamburger toggle by default. With Pro you can pick the hamburger for any width and open the menu as a Default dropdown, a Popup or an Offcanvas panel.
- Layouts set per device, including Elementor’s extra breakpoints.
- Vertical menus as Normal, Toggle, Accordion or Side.
- Popup and Offcanvas hamburger menus with Master Addons Pro.
- Works with the Mega Menu extension for multi-column panels.
Vertical Menu Layouts: Normal, Toggle, Accordion and Side
Pick Vertical in Layout and a second control, Type, appears. Each type opens submenus in a different way, and both Layout and Type can be set per device, so a menu can stay Normal on desktop and switch to Accordion on phones.
- Normal opens a submenu to the side of the list when the reader hovers its parent item.
- Toggle expands a submenu under its parent on click, and several can stay open at once.
- Accordion also expands on click, but opening one submenu closes the one that was open.
- Side pins the menu to the edge of the page. Only the main items sit in the bar, and their submenus open in a panel beside it.
Normal: the submenu opens to the side on hover.
Toggle: the submenu expands under its item.
Accordion: one submenu open at a time.
Side: the main items in a bar on the page edge, with the submenu in a panel beside it.
Style every menu level and state
The Style tab has separate sections for the Main Menu Item, Dropdown Menu, Dropdown Menu Item, Dropdown Submenu and Dropdown Submenu Item. Each gets colors and backgrounds for the Normal, Hover and Active states, plus padding, borders and dividers, so the link to the current page can look different from the rest.
- Normal, Hover and Active states for main items and dropdown items.
- Separate styling for the dropdown panel, its items and deeper submenus.
- Dividers between items, with type, size and color.
Hamburger toggle and indicator icons
Style the hamburger toggle as an icon, text or both, with a Default, Stacked or Framed view and a square or circle shape. It can show one icon while the menu is closed and another while it is open. Indicator icons mark the items that have dropdowns and submenus: pick your own icons, show or hide them, and set their size, color, position and rotation.
- Hamburger toggle as an icon, text or both.
- Different icons for the closed and open menu.
- Custom dropdown and submenu indicator icons with rotation.
Dropdown spacing and per-device layouts
Set the dropdown width and its gap from the top of the menu, the gaps between items and the padding inside each link. Transition duration controls how fast hover colors and dropdowns change. Because the layout is set per device, you decide where the menu switches from a horizontal bar to a vertical list, or to the hamburger with Pro.
- Dropdown width and gap from the top.
- Gaps between items and link padding for easy tapping.
- Transition duration for hover and dropdown changes.
Elementor Pro menu widgets vs Master Addons Nav Menu
Elementor’s free plugin has no widget for placing and styling a WordPress menu. Its Menu and WordPress Menu widgets come with Elementor Pro. Here is how they compare.
| Elementor Pro | Master Addons Nav Menu | |
|---|---|---|
| Price | Elementor Pro license | Included in Master Addons; Popup and Offcanvas hamburger types with Pro |
| Layouts | Horizontal, vertical, dropdown | Horizontal, vertical (4 types), hamburger |
| Mobile menu | Toggle below a breakpoint you choose | Hamburger on phones by default; Popup and Offcanvas with Pro |
| Layout per device | One breakpoint setting | Set for every device |
| Hover pointer animations | Yes | No |
| Mega menu | Menu widget with dropdown content | Mega Menu extension |
If you already pay for Elementor Pro, its menu widgets do the job. Without it, Nav Menu and the Mega Menu extension give you a styled header menu without Elementor Pro.
Nav Menu at a Glance
What the widget does, read from Master Addons 3.2.3.
| Item | Nav Menu widget |
|---|---|
| Menu source | Any menu from Appearance, Menus, picked in Select Menu |
| Layouts | Horizontal and Vertical on every device; Hamburger on phones by default |
| Vertical types | Normal, Toggle, Accordion and Side |
| Hamburger on desktop and tablet | Master Addons Pro |
| Hamburger types | Default on phones; Popup and Offcanvas with Pro |
| Submenus | Separate style sections for the dropdown, its items, deeper submenus and their items |
| States | Normal, Hover and Active for main items and dropdown items |
| Indicator icons | Dropdown and submenu icons you choose, with size, color, position and rotation |
| Hover pointer animations | No (Elementor Pro’s menu widget has them) |
| Sticky | No setting in the widget; make the header container sticky |
| Mega menu panels | Mega Menu extension |
| Needs | Elementor and Master Addons, no Elementor Pro |
Nav Menu Examples
Five live demos built with the widget. Open one, then import the layout from the Template Viewer below.
- Charcoal navbar and mega menu: a dark header bar with a multi-column mega menu panel.
- Nav menu with top bar: a contact strip above the main menu.
- Dropdown menu variations: several dropdown styles on the same menu.
- Vertical navigation menu: the menu as a vertical list.
- Vertical side menu: the Side type pinned to the edge of the page.
How to add a nav menu in Elementor
The widget uses menus you build in WordPress, so start there.
- Create your menu under Appearance > Menus.
- In Elementor, drag the Master Addons Nav Menu widget into your header, footer or page.
- Pick the menu in Select Menu and choose a layout for desktop.
- Switch to tablet and phone view to check the layout on each device. Phones get the hamburger toggle by default.
- Style the menu items, dropdowns and toggle in the Style tab, then publish.
For a full header walkthrough, read how to build a nav menu in Elementor without Pro. For a site-wide header, use the free Theme Builder.
Pairs well with: Mega Menu for multi-column panels, Off-Canvas Content (Pro) for a slide-out panel, the Theme Builder for a site-wide header, Display Conditions (Pro) to show a different menu to logged-in visitors, and Tabs for in-page navigation.
Frequently Asked Questions For Nav Menu
How is this different from other Nav Menu widgets?
Elementor’s own menu widgets need Elementor Pro. Master Addons Nav Menu runs without Elementor Pro and adds per-device layouts, four vertical menu types, separate styling for every menu level and state, custom indicator icons and a styleable hamburger toggle. It also works with the Mega Menu extension.
Can I use this menu with the Mega Menu extension?
Yes. Turn on the Mega Menu extension, build the panel content for a menu item from the WordPress Menus screen, then select that menu in the Nav Menu widget. The widget shows the mega menu panels on the front end.
Is it difficult to set up the different styles for normal, hover, and active?
No. Open the Style tab, pick a part of the menu such as Main Menu Item, and switch between the Normal, Hover and Active tabs to set the colors for each state.
How do I edit the menu that shows in the widget?
The widget shows a WordPress menu, so you edit it under Appearance, Menus. Add, rename or reorder items there and save. The Select Menu control in the widget has a direct link to that screen, and the changes show up in Elementor after a refresh.
How do I add a submenu?
In Appearance, Menus, drag the item a little to the right under the item it belongs to, until WordPress marks it as a sub item, then save. The widget shows it as a dropdown. Style it in Style, Dropdown Menu and Dropdown Menu Item.
Do I get a hamburger menu on mobile without Pro?
Yes. On phones the widget switches to the hamburger by default, and the menu opens in place under the toggle. Using the hamburger on desktop or tablet, or opening it as a Popup or Offcanvas panel, needs Master Addons Pro.
What's the best use case for the "Offcanvas" or "Popup" menu type?
Both are Pro hamburger types. Offcanvas slides the menu in from the left or right, which suits phones and minimal designs. Popup opens the menu over the page, which works well for full-site navigation on portfolio or agency sites. Without Pro, the hamburger on phones opens the menu in place under the toggle.
Will this menu work with my existing WordPress theme's header?
Yes, you can place the widget anywhere Elementor runs. To replace your theme’s header completely, build a header template with the free Master Addons Theme Builder and add the Nav Menu widget to it.
Can I have a different menu style on mobile vs. desktop?
Yes. Layout, alignment and many style settings can be set per device. For example, keep a horizontal bar on desktop, use a vertical accordion on tablets and the hamburger toggle on phones.
Can I make the menu sticky?
The widget has no sticky setting, so make the header container sticky instead. With Elementor Pro, use Advanced, Motion Effects, Sticky: Top on that container. Without Pro, add selector { position: sticky; top: 0; z-index: 99; } to the container in the Master Addons Custom CSS section. Our sticky header guide covers the full setup.
Why does my menu not show?
Check four things. The widget needs a menu picked in Select Menu, and the site needs at least one menu under Appearance, Menus. A header template only shows where its display condition applies. On phones the menu is folded into the hamburger, so check that the toggle color stands out from the header background. Last, clear your cache and any JavaScript delay setting after changes.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
