BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Nav Menu Widget for Elementor Pro

Show a WordPress menu with dropdowns, mega panels and a mobile menu.

Overview

What Nav Menu does

Nav Menu shows a WordPress menu with hover effects, dropdowns, mega panels and a mobile menu. Mega panels can be saved Elementor templates, or Mega Panel 2 panels built from the menu itself, with images, descriptions, badges, a live preview, and an Elementor template chosen for any menu item.

Live demo

See it in action

Sample 1

Fast, accessible and easy to edit. Every section built to convert visitors into customers.

Sample 2

Fast, accessible and easy to edit. Every section built to convert visitors into customers.

Video

See it in video

Features

What it can do

  • Horizontal or vertical menu, with vertical submenus opening to the side or as an accordion.

  • Submenus open on hover or click, and the arrow always opens them by keyboard and touch.

  • Five hover effects and four submenu animations.

  • Mega panels: show a saved Elementor template under any top level menu item.

  • Mega Panel 2: panels built from the menu itself, with groups, links and a live preview, columns, image cards or an icon list.

  • Images, short descriptions and badges for menu items, set in Appearance > Menus.

  • An Elementor template per menu item, chosen in Appearance > Menus, shown inside Mega Panel 2.

  • Mobile menu as a dropdown or a side panel, with mega panels stacked for phones.

Use cases

When to use it

Site header

Place a horizontal menu in your header template and switch to the mobile menu on tablets and phones.

Full width mega menu

Build a panel as a saved template, attach it to a top level item and set Panel Width to Full width (edge to edge of the screen).

Sidebar navigation

Use the Vertical layout with Open below (accordion) for documentation or shop category menus.

One page site

Keep Close After a Link Is Chosen on so the mobile menu closes when a visitor jumps to a section.

Setup

How to set it up

What you need: A menu created in Appearance > Menus. Mega panels also need a saved template (Templates > Saved Templates).

  1. Create your menu in Appearance > Menus.

  2. Drag the Nav Menu widget into your header and choose the Menu.

  3. Set the Layout, Open Submenus On, Hover Effect and Submenu Animation.

  4. For a template panel, add a row in Mega Panels with the Menu Item and Template.

  5. For Mega Panel 2, switch on Use Mega Panel 2 and pick a Layout.

  6. In Appearance > Menus, open each item to add an image, a short description, a badge or an Elementor template.

  7. Set up the Mobile Menu and style the items, submenus and panels.

FAQ

Questions and answers

How do I make a full width mega menu?

Design the panel as a saved template, add a row in Mega Panels with the menu item and the template, and set Panel Width to Full width (edge to edge of the screen).

What is Mega Panel 2?

A panel built from the menu itself: groups, links and a live preview, or columns, cards and lists, with images, descriptions and badges you set in Appearance > Menus.

Can I show an Elementor template for one menu item, like Contact?

Yes. Turn on Use Mega Panel 2, then open the item in Appearance > Menus and choose it in the Elementor template field.

Can the mobile menu slide in from the side?

Yes. Set Opens As to Panel from the left or Panel from the right.

Bright Addons Pro

Get Nav Menu with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 51 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.