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
Free widget

Nav Menu Free Widget for Elementor Free

Your WordPress menu with modern dropdowns, mega menus and a mobile toggle.

Overview

What Nav Menu Free does

Nav Menu Free shows a WordPress menu as a horizontal or vertical menu. Pick a modern dropdown (rounded card, soft shadow, slide in) or a simple one, switch any top level item to a mega menu with columns, and get a toggle button with an accordion menu on tablets and phones. Use it in a header made with the free Header and Footer Builder.

Live demo

See it in action

Features

What it can do

  • Any menu from Appearance > Menus, in a horizontal or vertical layout.

  • Modern dropdown with a rounded card, soft shadow and slide in, or a simple plain list.

  • Sub menus open on hover or on click, with third level menus opening to the side.

  • Mega menus: sub-items become column headings, their sub-items the links, with descriptions.

  • Mega menu as wide as the menu, the full screen or a width you set.

  • Underline, background or color only hover effect, with the current page marked.

  • Toggle button with an animated icon and an accordion menu on tablets and phones.

  • Keyboard friendly: Escape closes, arrow buttons have screen reader labels.

Use cases

When to use it

Site header

Put it next to the Site Logo in a header template made with the Header and Footer Builder.

Mega menu for many pages

Show product groups, services or guides as columns under one top level item.

Footer or sidebar menu

Use the vertical layout for a list of links in a footer or a sidebar.

Click to open menus

Choose click instead of hover for menus with many sub-items or for touch screens.

Setup

How to set it up

What you need: A menu made in Appearance > Menus.

  1. Make a menu in Appearance > Menus, with sub-items under the items that need a dropdown.

  2. For a mega menu, open a top level item there and tick Show the sub-items as a mega menu (Bright Addons).

  3. Drag Nav Menu Free into your header and pick the Menu.

  4. Choose the Layout, Alignment, Hover Effect and Sub Menu Indicator.

  5. In Dropdown pick Modern or Simple and whether menus open on hover or click; in Mega Menu set the width and Most Columns.

  6. In Mobile Menu choose when the toggle button shows, then style everything in the Style tab.

FAQ

Questions and answers

How do I make a mega menu?

In Appearance > Menus, open a top level item and tick Show the sub-items as a mega menu (Bright Addons). Its sub-items become column headings and their own sub-items the links.

Does it work with block themes?

Yes. Block themes hide Appearance > Menus, so Bright Addons switches that screen back on. Use the widget in a header made with the Header and Footer Builder.

When does the toggle button show?

On tablets and phones by default, using Elementor’s breakpoints. You can pick phones only or never.

What does the Pro Nav Menu add?

Mega panels built from Elementor templates, menu item images and badges, more layouts and sticky options, in Bright Addons Pro.

Free forever

Nav Menu Free is free

It is one of 53 widgets in the free Bright Addons plugin. Each widget loads its code only on pages that use it.