Do you want to build your menu right inside Elementor? With the repeater you add, order and style every menu item in the widget, without going to Appearance > Menus.
The Navigation Menu widget from The Plus Addons for Elementor has a Repeater menu type for this. It also works on block themes, which hide the Menus screen.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free plugin has a simpler widget, Navigation Menu Lite, which also has this option.
- Widget to enable: Navigation Menu, switched on under The Plus Addons > Widgets.
- A header template. Add the widget to your site’s header so the menu shows on every page. Build the header with the free Nexter Builder or with Elementor Pro’s Theme Builder.
Step 1: Choose Repeater
In Layout, set Menu Type to Repeater, then choose the Menu Direction.
Step 2: Add the top-level items
Open Content > Navigation Menu. Each row is one menu item. For a top-level item:
- Open the row and set Menu Level to 0 Level.
- Enter the page address in Link and the text in Menu Text.
- Click + Add Item for the next one.
Step 3: Add submenu items
A row becomes a submenu item when its level is higher than the row above it. Add a row directly below its parent and set Menu Level to 1 Level. Rows at 2 Level and deeper make further levels, up to 6.
Order matters. A 1 Level row belongs to the nearest 0 Level row above it. Drag rows to move them.
Step 4: Make a mega menu (optional)
On a 1 Level row, Sub Menu Type offers Link (a normal item) or Mega Menu. Choose Mega Menu, then pick an Elementor template in Template. The Create Template and Edit Template buttons open it without leaving the page.
On the same row, Mega Menu Type sets the panel width: Default, Container or Full Width. With Default you also get Container Width and Dropdown Menu Alignment. These style the dropdown of the item above the row.
Moblie Mega Menu Link (spelled that way in the panel) shows a simple link, with its own Link and Menu Text, in the mobile menu instead of the template.
Other Row Settings
| Setting | What it does |
|---|---|
| Label | A small badge such as “New”, with its own Title, Color and Background Color |
| Menu Icon Type | None, an Icon, or an Image before the text |
| Submenu Minimum Width (Px) | The minimum width of this item’s dropdown |
| Normal / Hover / Active | Padding, colour, background and border for this item only |
| Description | A line of text under the item (style it in Style > Description) |
| Custom Class | A CSS class for your own styling or scripts |
The Mobile Menu
If Mobile Menu > Select Menu is left empty, the mobile menu shows your repeater items. Pick a WordPress menu there only if you want a different mobile menu.
Limitations
- Sub Menu Type only exists on 1 Level rows. Deeper rows are always links.
- The menu lives in this widget. To reuse it in another header, copy the widget.
- Jupiter X and Blocksy themes: the widget always prints a WordPress menu there, so the Repeater type does not work.
Troubleshooting
A submenu item shows as a top-level item
Its Menu Level is still 0 Level, or it is not directly below its parent. Fix the level or drag it into place.
The mega menu panel is empty
Pick a published template in Template. If the Edit Template button keeps loading, open the template from Templates > Saved Templates instead.
