Nav Menu
Give visitors a clear menu on every screen size.
A WordPress menu as a horizontal or vertical nav bar with hover/click dropdowns, keyboard support, pointer effects and a mobile dropdown, drawer or full-screen panel.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Licence: free — installs straight from Moduly
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Nav Menu. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Menu
| Setting | What you can set |
|---|---|
| Layout | Horizontal or Vertical |
| Alignment | Start, Center, End, Spread out or Fill (equal width) |
| Levels | How many levels of the menu to show. 0 = all; 1 = top level only. |
| Open Submenus On | Hover (and click / keyboard) or Click only · The arrow button always opens a submenu from the keyboard and on touch screens. |
| Vertical Submenus | Expand below (accordion) or Fly out to the side |
| Dropdown Animation | None, Fade, Slide up or Scale in |
| Submenu Indicator | Icon picker |
Mobile Menu
| Setting | What you can set |
|---|---|
| Switch to the Toggle Below | Mobile breakpoint, Tablet breakpoint, Custom width, Never (always the full menu) or Always (toggle on every screen) |
| Width (px) | Number |
| Panel | Dropdown below the toggle, Slide-in drawer or Full screen |
| Drawer Side | Left or Right |
| Full Screen Width | Stretch the dropdown across the whole screen instead of the widget’s width. |
| Toggle Icon | Icon picker |
| Close Icon | Icon picker |
| Toggle Text | Always read out to screen readers; shown when “Show Text” is on. |
| Show Text | On / off |
| Toggle Alignment | Start, Center or End |
| Close After a Link Is Clicked | On / off |
Style tab: design controls for Main Menu, Hover Pointer, Dropdown, Mobile Toggle or Mobile Panel — colours, typography, spacing, borders and hover states.
Tips
- Start with the Layout choice — it changes the overall look the most; fine-tune the rest afterwards.
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Mega settings can't be edited in the Customizer's menu panel. That panel doesn't fire wp_nav_menu_item_custom_fields; use Appearance → Menus.
- Font Awesome icons rely on Elementor's bundled FA styles, which the widget declares. The emoji/text icon option works without them.
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
Related
- Works well with: Advanced Search, Breadcrumbs, Mega Menu.