Introducing Menu Widget: The Most Advanced Navigation Menu Design On WordPress

Introducing the most expected feature of the year: the Menu Widget! Read on to find out how to design gorgeous menus on any theme and for every device.

Designing and customizing menus is a huge pain, and we are now introducing a whole new way to make it easy and fun.

We are thrilled to be introducing the much expected Nav Menu widget.

This widget is extremely flexible. In fact, you can find NO OTHER WordPress theme or plugin with as much menu design flexibility.

It enables you to create an infinite number of pixel-perfect menu designs, all customizable down to the very last pixel (It's the Elementor way, as  you know).

There's a lot more I want to let you know about this exciting new feature, but I'm too eager to show you all the possibilities it entails, so here goes.

Get in Elementor Pro

Horizontal, Vertical & Dropdown Layouts

Once you choose the menu from the previously created WordPress menus, you can start customizing the layout of the menu.

Your first choice is to pick from 3 basic layouts:

Horizontal - The menu will be spread out horizontally from left to right or vice versa.

Vertical - For getting the menu to be vertical and go from top to bottom.

Dropdown - Another vertical layout where the submenu drops down like an accordion

Pointers & Animations

By picking a pointer and an animation for the menu, you are able to create over 50 different effects for your hover and active menu items.

Just look at these beauties:

Underline Animations

The underline pointer features 5 animations: Fade, Slide, Grow, Drop in and Drop out.

Framed Animations

The framed pointer include 5 animations: Fade, Grow, Shrink, Draw and Corners.

Overline Animations

Overline includes the same set of 5 animations as the Underline: Fade, Slide, Grow, Drop in and Drop out.

Double Line Animations

Here again, for the double line pointer, we find 5 animations: Fade, Slide, Grow, Drop in and Drop out.

Background Animations

The Background pointer has the most animations. They create a button-like style on active. The Gif below shows the top 5 animations, but 11 animations are available for this pointer: Fade, Grow, Shrink, Sweep left / right / up / down and Shutter in vertical / out vertical / in horizontal / out horizontal.

Text Animations

The Text pointer only has a text animation effect, great for the minimalistic menu. It includes: Grow, Shrink, Sink, Float, Skew and Rotate.

Unprecedented Menu Customization

This widget took us months of hard work to complete.

It was well worth the effort, as you will be able to see when you delve deeper into the customization option the widget offers.

Spacing, colors, fonts. Each design parameter has been translated into the visual UI you know and love in Elementor. 

Menu Spacing & Alignment

Any web designer knows that setting spacing is one of the biggest pains when it comes to menu design.

Put simply, moving menu elements around used to involve painstaking code, and now it is done with a few handy draggable controls.

Some of our menu spacing controls include:

  • Horizontal padding for every element of the menu and submenu
  • Vertical padding for every element of the menu and submenu
  • Space between the menu items
  • Right, left, center and justified alignment

Color, Background & Typography

By customizing the color and typography of the menu elements, you are able to create a wide array of menus. From transparent to semi-transparent menus, full width, minimalistic, light, dark... The sky is the limit with regards to the types of menu bar designs you can reach.

Moreover, you get the same broad design options for the submenu as well.

Submenu

The dropdown submenu has gotten the same careful care as the menu did. 

The dropdown icon can be set to be a classic rectangle, chevron, angle, none or plus.

You can set every aspect of the submenu dropdown design, including text and background colors, typography, horizontal and vertical padding, border, box shadow,  divider and distance.

Mobile Responsive Menu

Elementor's Menu offers a Complete solution for mobile menus on WordPress. The mobile menu is controlled by a separate set of settings, giving you the ability to easily customize each menu to the right device.

Elementor's mobile menu features include:

Mobile & tablet breakpoints. Using the breakpoint setting, you can decide if the mobile menu will be displayed for tablet and mobile (1023px and below) or only for mobile (767px and below).

Full width on mobile. By setting the mobile menu to full width, you can have the mobile menu display in a limited width when closed (when only the hamburger icon is shown), but spread to full width when opened.

Hamburger or text mobile menu (Vertical & Accordion Menus). You can choose to display a collapsible hamburger icon or a fully-visible vertical menu.

Aside / Center alignment. Choose if the mobile menu is aligned to the side or to the center.

Toggle align. The closed hamburger icon can be aligned to the left, center or right.

Design the toggle button. Style your toggle button by color, background color, size, border width, border radius and normal and hover states.

Design the dropdown items. Set color, typography, spacing, divider and box shadow of the dropdown menu for both normal and hover states.

Responsive Navigation. Your menu will look good on any device, with the proper adjustment according to the width of the device.

Get in Elementor Pro

Menu is the First Step

We've been working on this feature for a really long time. The reason for that is that we  see the menu as one of the most important elements of every website, navigating the visitors through the site's variety of pages and content.

The Menu widget is even more important, considering our plans to incorporate it when extending Elementor's capabilities to design the entire website, including the header and footer.

For now, you can already use the menu widget to customize your landing page, home, or any other page's menu. If you are a coder at heart, you can also use the embed feature of Elementor to implement the menu bar across the header of your site, no matter which theme you are using. 

You can also use one of the sticky menu plugins to make the Elementor Nav Menu widget sticky to the header / sidebar.

How will the new Nav Menu improve your design workflow? We'd love to get your thoughts on the new widgets in the comments.

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time when it was only used to blog.

213 Responses

  1. Purchasing elementor has been the best work related decision I’ve ever made. Thank you for working everyday to improve it!!

  2. This is like Christmas or the opening of a new Star Wars movie! I have been wanting this feature for a long time. You guys have done it! Your plugin may be my favorite WordPress plugin EVER created!

  3. This is amazing! My theme menu has been a major source of discontent. Can the color settings and transparent header option change based on the page or post?

    Thanks!!!

  4. Excellent Ben!! Really great! The only thing to be perfect 10 is the sticky included. In order not have another plugin only for that! But again! Perfect!

  5. This. Is. AWESOME! For all small sites I build in the future, I will use this. So great to have this, thank you Elementor team.

    Just think out loud for a possible future. Support for adding Elementor Library Items to this menu (images, video, products, etc..) and the ability to make MegaMenu’s would make it THE replacement for any other plugin out there.

    Again, really awesome update!

  6. This may, at last, be an alternative to using Blox/Headway Themes for building and controling the menu, menu items, hovers, dropdowns etc.
    Have to test on the next project to see where each scores over the other … but a great addition for all those poor souls who haven’t been using Headway (now Blox) for years.
    Keep up the good work and all the new additions, guys.

  7. Most awaited feature………. I had to create custom theme just for menu. Love you Elementor and Team. Going to be premium user forever. 🙂

  8. I can only repeat it… you guys are A M A Z I N G … now there is truly hope for non code web designers like me… thanks a bunch and cudos to the team

  9. This is THE one that I have been waiting for. This is everything to me. In fact, now that I have this, I wouldn’t care if you took away all the other amazing stuff you’ve done… um… actually, let me take that back… I appear to have gotten a bit carried away there.

  10. Awesome! I can’t wait until the day I can use Elementor to build an entire website, including the header and footer, without having to play with shortcodes and theme hooks. The theme I’m currently using is great, but using multiple tools, each with their own way of doing things means having code and styling defined all over the place. It’s high time for something revolutionary in WP. It’s 2017, after all, not 2010. And this is a great step in the right direction! 🙂

  11. You are amazing! Keep going.
    [I do not understand why Elementor (the free version) is not embedded in the WordPress system.
    A huge loss!]

  12. +100 on Mega Menu, respevtively adding the possibility to add Pictures, Forms, Maps, etc.. into the Elementor Nav Menu – that would safe much frustration with other plugins

  13. Thank you Elementor community, all what left now:

    1- Mega-menus.

    2- Single post elements (post title, featured image, date, author, excerpt, content … with the ability to apply them globally or on some specific categories …).

    3- Parallax effect for sections and columns background …

  14. This idea is great !.
    However, I have a question: can this menu only be inserted in a web manually, inserting a widget in a section and thus inserting it in all the pages that you want it to appear?
    What happens to blog posts? Normally the posts are not built with Elementor, but they use the theme and the menu that brings that theme.
    Is it possible to replace the theme menu automatically in all blog or web content with one that we specifically believe with Elementor?

      1. Hi, what is the recommended way to put the navigation on all pages? I could create a child theme, but you mention an embed feature. Where is that?
        Thanks.

      1. I’d love to use the Nav Menu widget, but I can’t find the thing!

        I have searched for it in the panel, but no joy. There isn’t an element named “Nav Menu” amongst the other available elements. Is it supposed to be?

        I purchased Elementor Pro (just made sure I have the receipt for it), and I updated Elementor today.

        Perhaps I’m looking in the wrong place? I opened the WP Pages menu, clicked on the “Edit with Elementor” hypertext next to my home page, and I’m looking in the panel to the left that houses all of the other page elements, like “columns,” “heading,” “posts,” “portfolio,” etc.

        Am I looking in the wrong place?

          1. Hi, Scott!

            Thanks so much for the response, but … um … my panel shows all of the other Elementor Pro elements, but not the Nav Menu. And my Elementor and Elementor Pro plugins are not showing that they need updates.

            Any suggestions?

            Thanks again!

      2. Hi Ben, I have the same problem. I have Pro, license activated. But the Nav Menu does not show up in the elements. Not listed and not in search. Any ideas?

        1. Cato, I found that you’re able to 1) disable and delete Elementor Pro and then 2) download the latest version of Elementor Pro and install it–without doing anything nasty to your site. When I did this, the new Pro Elements showed up. I’m still not sure why WP didn’t show that Elementor Pro needed updating, but my Pro plugin was several versions behind. I guess we need to check periodically to see if we have the latest version. Good luck! 🙂

  15. Hi Ben,

    I didn’t realize that my comment needed to be moderated out. I simply asked if you were considering an image accordion for a future release. If not, no worries.

    Thanks,
    Alex

  16. I thought I was dreaming when I read about in my email, and thanks this isn’t dream!! woohoo, is this real?

    Cannot wait to play with it, thanks a lot Elementor! never regret to buy the pro! I knew it’s worth it.

    PS: I know I may be asking too far, but it would be awesome if Elementor can also create mega menus in addition!

  17. What abour replicating the cart option in this menu? If someone has a product in their cart, it shows up on the normal menu but I can’t seem to find that option for this widget. Is this available?

  18. Hi Ben,

    That is great news. I love Elementor, it changed my life.
    Besides, are you planing to build a popup-like widget? That’d be more than awesome.

    Congrats Elementor team, you did a really good job.

  19. This is so great! The combination of amazing features and intuitive UX makes the Elementor builder second to none in this space. So grateful for everything you do.

  20. Thanks, You are always do the best things, I love Elementor!
    Now the theme are not elementor, it’s really a problem, hope we’ll have elementor theme in the feature.

  21. Any chance of bringing out accordion type menus. Much easier to use without blocking out page content when expanding with sub-items.

  22. Great. Was waiting for this widget since I bought the product. My next wish is to have a search engine in the menubar. Then I will switch to Elementor Pro menu widget. Thanks for your hard work. You make my life easy. I can concentrate on content and improve easily the container (web pages). Please continue another 100 years

  23. I’m not a pro user. Does this mean I can create a menu inside elementor without external theme or plugin? Any way to test pro before u buy?

  24. you guys are probably one of the BEST CODERS in the digital page builder space if not, the BEST. Handsdown. U guys make such difficult features and functions in all other page builders look so easy, so smooth and a breeze… Thrive Architect & Beaver Builder still seems a notch away from Elementor. The only thing i hope to see are direct lead forms’s API integration with the big names email marketing services. Please keep up the awesome job!!! Thank you!

  25. Great but it’s not sticky, no mega menu…..btw i can live without all but sticky option need to be. This is like the low.
    Elementor is the best wordpress builder, know from experience. Free Elementor plugin give more oprions that 99% payed builder plugins, have clean code (i create a website and GTMetrix say 96%-89% what is awesome) and its easy to work with.
    Worth every $!

  26. great new thing…….but how can i delete the “Theme Header-Menü”. Astra, Sydney….etc. – and one thing…bring an easier parallax effect for sections and colums…..thanks

  27. Hey Guys, great work! I was waiting for this … and now it’s christmas 🙂 Thank you. I really like elementor! It’s such a fast pagebuilder. // One note: I just tried the Navigation functionality and miss the text align for fold-up at the menu. The toogle button is located at the right top corner and the text should fold-up from right to left. Actual the text align is left – and it looks strange 😉 I could send you a screenshot …

  28. Hi Ben,
    It was great meeting you yesterday on the event.
    The new feature is wonderful, can you please explain (short explanation is enough…) how do I embed it to the menu instead of the current menu (pojo theme)?
    Thanks,
    Daniel

  29. Hi
    Just tried it on a site re-build, but I can allocate a (new) WP menu to the Elementor Menu widget … only the locations specified by the theme are available.

    This will prevent us from using this widget, which is a shame.

    Theme is Headway … but I’m assuming this limitation goes for all themes?

    There is a Menu chooser box (the first one under Layout in Edit Nav Menu) but it doesn’t come up with the list of menus defined in WordPress … can this be changed?

    Many thanks, David

      1. Hi Ben
        Many thanks for the quick response. Looking forward to the update.
        Using Elementor has added another layer of pleasure to building sites – thank you!
        Regards, David

      1. Updated with latest version and we are getting this following error: Uncaught TypeError: Cannot read property ‘page’ of undefined…

  30. Great job on the new menu widget. Thank you.

    A few suggestions I’d like to see:

    -Looks like your already going to come out with an update to embed the menu easier site wide. Sounds good.

    -Ability to make it sticky with fade in on scroll transitions effects would be cool.

    -Adjust the size and styling of the mobile hamburger icon as much as possible. Be able to make it sticky as well.

    -Add cool hamburger icon open/close animation options.

    -Add the ability for the mobile menu to appear and slide in from the right or left when opened. Add options for transition effects when the mobile menu opens/closes.

  31. Dear Elementor-Team,
    I love your new widget, but have a small problem.
    It seems like – no matter what I do – that the Menu form the active page gets an blue background.
    Do you what could be the reason?
    Thank you in advance

  32. Just received the update today, thanks. So, once you’ve designed a menu, how do you upload it at the theme’s menu area on the side of the logo? I have Atlanta. Many thanks, Ben.

  33. Previously I used E pro 1.7.0 and I updated with the latest Version 1.8.0 and I am getting this Uncaught Syntax Error: Unexpected end of input. And so many 404 errors… guide me how to resolve this. Thanks!

  34. Hi Ben,
    I am impressed by what I am watching / reading about Elementor, and I am very interested in buying the Unlimited edition. On the other hand, I am a bit hesitant because of what I’ve been reading lately about the Gutenberg editor and its planned inclusion into WP core.

    Are you confident that Elementor page-builder will be able to adapt to the new concept and still work after the change? In that light and from a long-term perspective, can you still recommend to buy the Unlimited edition? I really hope so, because Elementor really seems to be what I have been looking for, and I don’t like the Gutenberg editor at all.

    1. We are fully supportive of Gutenberg, and see it as an opportunity for our company to grow even further. WordPress will undergo changes that will force theme developers as well as plugin developers to adapt. On a side note, it is never a good idea to wait for new technology to come, because the next big thing is always around the corner. You’ll just end up always waiting and never making.

  35. hello, great stuff! just purchased pro version. try to put a logo alongside the navigation like your video (look at 1:38 min in the video, to understand me), and no luck. it wont go 50% eac… it’s just one on top another. please help. i’m sure it’s something i’m doing wrong.
    thanks

  36. Haven’t tried this yet, but I have Woocommerce and the shopping cart icon that updates dynamically if you have items in your shopping cart automatically gets added to the nav, is there a way to add this now that this widget allows you to essentially recreate the navigation? Likewise with a search icon. Thanks!

    1. He Jon,
      Just create 2 different menu’s (standard in WordPress) and create a 3 column section.
      Put menu 1 left, logo in the middle and menu 2 on the left.

      Hope that works for you.

      Kindest regards,
      Robert

      1. Hi Jon. Thanks for your suggestion. I may have missed something, but I think this approach won’t scale nicely to smaller screen sizes (i.e. results in dual hamburger menu icons).

  37. I’d like to have my header menu split into two: one with links to pages with primary content and another menu on the other side of the centered logo with links to secondary pages such as about us, contact us, etc… I want both menus to collapse into one hamburger. How can I do that?

  38. I’m using Generatepress and the default functionality of the menu is to include a search icon and if you have Woocommerce the shopping cart. You completely lose this functionality when utilizing the menu widget unfortunately. Do you have any workarounds for adding it back in?

  39. How can i add address and phone on the right side of the logo and move the menu below. Elemento looks nice but the header with no phone number or address doesnt make sense for local businesses. The same in the mobile view, when you search and find the site you are looking for, you want the phone number on the top of the mobile site. Not bashing, just practical, after years building sites for local businesses. I would love to see this feature implemented

  40. Ben, I’m blown away with Elementor Pro. Building and maintaining my WordPress sites is now a breeze. Thank you, thank you! Finally, we have a logical builder that doesn’t leave shortcodes all over our content. Please add a sticky menu option if possible. Thanks again. Loving Elementor Pro!!!

  41. Helo Ben, I need the same horizontal menu for desktop, tablet and mobile. I don’t need Mobile Dropdown ¿How can I get it?

  42. I have been working with the pro elementor and I love it!
    But when I put the nav menu, I can not find any option to leave the nav menu still.
    That is to say, that the nav menu stays still when I scroll through the web.
    Could the bar be anchored on the web?
    Thank you so much

  43. It would be useful if you could add a word to the Hamburger menu on mobile so for instance “Navigation” or “Menu” instead. I have a client that doesn’t like the traditional Hamburger menu icon.

    1. He Stephen,
      Have you tried using the GeneratePress template?
      It has sticky menus build in.
      If you use the GeneratePress Premium you get the option to have hooks so you can hook in your custom menu.
      Regards
      Robert

  44. Thanks for a wonderful widget. Two questions:
    Can I adjust divider length? I don’t like it going all the way to the edge, especially in mobile mode.
    Secondly, Can the dropdown get down to post level? I have my posts queried on the pages that the menu does open, but would love to have a full accordion option. Available?

Leave a Reply