Atomic Element · Free
Pick a menu from Appearance > Menus and get a styled header with dropdowns and a mobile drawer. Your client edits links in WordPress; your design stays intact.
The short answer
The Elementor WordPress menu widget from Animation Addons is the WP Menu element: an Elementor 4 Atomic Element that renders a menu you already manage in WordPress. You choose the menu, a horizontal or vertical layout, how dropdowns open, and the width at which it becomes a hamburger with a slide-in drawer.
Many "Elementor V4 compatible" menu widgets are classic v3 widgets running inside Elementor 4. The WP Menu is a native Atomic Element. Need a menu you build item by item instead? That is the Nav element (Pro).
| Plan | Free |
|---|---|
| Element type | Native Elementor 4 Atomic Element (single element) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Panel location | AAE Header & Footer, next to Nav and Site Logo |
| Menu source | Any menu from Appearance > Menus, chosen in Select Menu |
| Layout | Horizontal or Vertical; Left, Center, Right or Justify alignment |
| Dropdowns | Open On Hover or Click; 6 dropdown effects |
| Mobile | Mobile Hamburger below Mobile Breakpoint (px) (default 768; 0 = never); drawer with 8 effects and your logo or a label in its header |
| Styling | Colours, spacing, borders and sizes for items, dropdowns, hamburger and drawer, each settable per breakpoint |
| Limits | The drawer is at most 90% of the screen width; dropdowns are standard sub-menus, not mega-menu panels |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with the WP Menu and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.
Logo left, menu right, a white dropdown under "Rooms" with a soft border, and the current page in the brand gold.
Centred links that get a rounded tinted background on hover, with roomy padding and a small gap.
Below 1024px the menu becomes a hamburger. Tapping it slides a 320px drawer in from the right over a dark overlay, with the clinic logo and a close button at the top.
On mobile, a dark panel covering most of the screen fades in with large serif links and a thin divider under the header.
A stacked list of links on the left; sections expand under their parent with a +/− toggle and stay open while the reader browses.
Dropdowns that open on click, not hover, with a 280px panel and custom arrows that change when open.
Features
Every option below is a real control in the WP Menu panel or part of how the element renders. Nothing here needs custom code.
Select Menu lists every menu from Appearance > Menus. Edit links, order and sub-items in WordPress, and every header using the element updates.
Open On sets whether dropdowns open on Hover or Click. With Click, the parent link itself opens the sub-menu on desktop, a larger target than the arrow. Choose from 6 Sub-menu Dropdown Effect options: Slide Down, Fade, Slide + Fade, Scale (Origin), Zoom and Flip.
Turn on Mobile Hamburger and set Mobile Breakpoint (px). Below that width a hamburger opens a drawer with 8 Mobile Drawer Effect options: Slide from Left, Right, Top or Bottom, Fade, Scale, Zoom In and Flip. In the drawer, sub-menus expand inline. The drawer sits below the WordPress admin bar when you are logged in.
The Drawer Header shows a Label such as "Menu", or a Logo you upload, beside the close button. The label becomes the logo's alt text.
Items, dropdown panel, dropdown rows, sub-menu toggle, hamburger, drawer header and drawer each have colour, spacing, border and size settings you can change for desktop, tablet and mobile. Typography comes from Elementor's Style tab.
Keep the built-in chevron (+/− in Vertical layout), or upload your own Icon (Collapsed) and Icon (Expanded). Uploaded icons are painted with the Icon Color, so they recolour like text.
Built on the atomic base
Why it mattersA client can add a page to the menu without opening Elementor, and the header design does not break.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Download freeCreate or check your menu under Appearance > Menus.
Install and activate Animation Addons for Elementor, then open your header template with the Atomic Editor on.
From AAE Header & Footer in the Elements panel, drag WP Menu into the header.
In Content, choose the menu in Select Menu; in Layout, set Horizontal or Vertical.
Turn on Mobile Hamburger, set Mobile Breakpoint (px), and pick a Mobile Drawer Effect in Motion.
Style items, dropdowns, hamburger and drawer per breakpoint, check mobile preview, and publish.
Honest comparison
What each option has, side by side. We list where the other choice is the better fit, too.
| Feature | Elementor Pro Nav Menu | Animation Addons WP Menu |
|---|---|---|
| Plan | Elementor Pro | Free, works on Elementor Free |
| Element type | Classic widget | Native Elementor 4 Atomic Element |
| Uses WordPress menus | Yes | Yes |
| Layouts | Horizontal, vertical, dropdown | Horizontal or vertical, plus mobile drawer |
| Mobile toggle | Toggle button with a dropdown breakpoint | Hamburger at any px breakpoint, or 0 for never |
| Hover styling | Pointer hover effects | Hover colour, background and borders |
| Mobile menu style | Dropdown under the toggle | Slide-in drawer, 8 effects, logo in header |
Compared with Elementor 4.3.3 (September 2026).
Elementor Pro's Nav Menu has pointer hover effects the WP Menu does not. The WP Menu wins on the mobile drawer, click-to-open dropdowns and needing no Elementor Pro.
Who it's for
The people who get the most out of it, and what they use it for.
Handing clients a header they can update from Appearance > Menus.
Who need a responsive menu without Elementor Pro.
With deep menus that open on click.
Using a vertical sidebar menu.
FAQ
Install the free Animation Addons for Elementor plugin and drag the WP Menu element from AAE Header & Footer into your header. Choose your menu in Select Menu, pick a layout, and turn on Mobile Hamburger. The Animation Addons WP Menu renders any menu from Appearance > Menus and runs on Elementor Free with the Atomic Editor on.
Select the Animation Addons WP Menu, turn on Mobile Hamburger and set Mobile Breakpoint (px), for example 1024. Below that width the menu becomes a hamburger that opens a slide-in drawer. Choose one of eight Mobile Drawer Effect options, such as Slide from Right or Fade, and add your logo in the Drawer Header.
Yes. In the WP Menu's Dropdown Panel section, set Open On to Click. On desktop, clicking the parent item then opens its sub-menu instead of following the link, and clicking elsewhere on the page closes it. In the mobile drawer and in Vertical layout, the Animation Addons WP Menu expands sub-menus from their toggle button.
No. The Animation Addons WP Menu shows standard WordPress sub-menus as dropdown panels you can widen and style, not multi-column mega-menu layouts with images or widgets. For a header with custom content per item, use the Animation Addons Nav element (Pro) or place content in an Offcanvas panel (Pro).
WP Menu renders a menu you manage in WordPress under Appearance > Menus, so editors change links without opening Elementor. Nav, an Animation Addons Pro element, is a navbar you build item by item in Elementor, with each item as its own atomic element. Choose WP Menu for client-editable menus and Nav for custom layouts.
Largely. The Animation Addons WP Menu uses real buttons for the hamburger and sub-menu toggles, with aria-expanded updated as they open and close. Escape closes the mobile drawer, the page stops scrolling behind it, and transitions are cut for visitors who prefer reduced motion. The current page is highlighted with WordPress's own current-menu classes.
No. The menu HTML comes from WordPress's own wp_nav_menu, so links are crawlable and present without JavaScript. The Animation Addons WP Menu adds one small script and stylesheet for dropdowns and the drawer, with no animation library. The script closes the drawer automatically if the screen is resized past the breakpoint.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the WP Menu on the same page or template.
Your WordPress menu, your design, every breakpoint.
