Atomic Element · Pro
Build the menu item by item, open dropdowns with one of six animations, and give phones a slide-in drawer with drill-down submenus. Part of Animation Addons Pro.
The short answer
The Nav is an Elementor navbar with mobile menu from Animation Addons Pro, built as an Elementor 4 Atomic Element. Each menu item is its own element with a link, optional dropdown and styles. Below a breakpoint you choose, the navbar becomes a slide-in drawer with drill-down submenus. Build items by hand or import them from WordPress.
Elementor 4 has no atomic navigation menu, and many "V4 compatible" addons ship classic v3 menu widgets. The Animation Addons for Elementor Nav is a native Atomic Element.
Need something free? The free WP Menu element renders an existing WordPress menu with dropdown effects and a mobile drawer.
| Plan | Pro Animation Addons Pro licence |
|---|---|
| Element type | Native Elementor 4 Atomic Element (composite) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Child elements | Nav Item; dropdown Flexbox; Dropdown Item; nested Nav Items; Mobile Nav (added when the mobile menu is on) |
| Dropdowns | Enable Dropdown per item; Trigger Click (default) or Hover |
| Dropdown animations | 6: Default (GSAP), Grow Down, Rotate 3D, Grow Out, Slide Items, Rotate Items |
| Mobile menu | Enable Mobile Menu; Breakpoint from your Elementor breakpoints (default 767px); Drawer Position Left or Right; Close on Link Click; Lock Body Scroll |
| WordPress menus | Import any menu; Auto-sync from WordPress updates imported items when the menu is saved |
| Accessibility | Menubar roles, full keyboard support, focus kept inside the open drawer |
| Limit | On mobile, dropdowns open as drill-down panels by tap only; hover triggers and dropdown animations apply to desktop |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Every demo is built with the Nav, part of Animation Addons Pro, plus native Elementor 4 elements. Extensions they add are named on each card.
Logo left, five links centred, a "Start a project" button right; "Services" grows down on hover.
"Product" opens on click with a 3D rotate into a wide panel: two columns of links with one-line descriptions.
A drawer from the left; "Courses" slides to its own panel, then "Design" to a third, each with a back link.
A clean header matching the clinic's WordPress menu; when staff add "Holiday hours" in WordPress, the live header updates.
A transparent nav over a photo hero whose items jump to page sections; on phones the drawer closes after each tap.
A centred serif logo above small-caps category links whose dropdowns rotate items in one by one on hover.
Features
Every option below is a real control in the Nav panel or part of how the element renders. Nothing here needs custom code.
Nav Items, Dropdown Items and dropdown containers each have their own Style panel. Style all items with one Class, or highlight a single "Sale" link.
The dropdown container is an Elementor Flexbox, so you can add paragraphs or headings beside the links for a mega-menu-style panel.
Below your Breakpoint (taken from your Elementor breakpoints), the navbar moves into a drawer. Parent items open their children in a new panel with a back link.
Open Mobile Menu (Editor) keeps the drawer open on the canvas. The hamburger, close and back icons each have their own Style tab.
Import any menu from Appearance > Menus. With Auto-sync from WordPress on, saving that menu updates the imported items everywhere, leaving hand-added items and styling alone.
Built on the atomic base
Why it mattersHeader and footer menus share the same Classes.
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.
Get Animation Addons ProInstall Animation Addons for Elementor with an active Pro licence, then open your header with the Atomic Editor on.
Find Nav in the Elements panel and drag it into the header. It drops in with four items.
In Menu Items, rename and link the items, or import a WordPress menu and turn on Auto-sync from WordPress.
Select an item, turn on Enable Dropdown, choose its Trigger and Dropdown Animation, and add links under Sub-menu Items.
Select the Nav, open Mobile Menu, turn on Enable Mobile Menu, pick a Breakpoint and Drawer Position, and use Open Mobile Menu (Editor) to style the drawer.
Check every breakpoint, then 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 (classic widget) | Animation Addons WP Menu (Free) | Animation Addons Nav (Pro) |
|---|---|---|---|
| Requires Elementor Pro | Yes | No | No (needs Animation Addons Pro) |
| Native Atomic Element | No | Yes | Yes |
| Menu source | WordPress menu | WordPress menu | Built item by item, or imported with auto-sync |
| Each item a separate element | No | No | Yes |
| Mobile menu | Dropdown with a toggle button and breakpoint | Drawer that slides, fades, scales, zooms or flips in | Left or right drawer with drill-down panels |
Compared with Elementor 4.3.3 (September 2026).
Elementor Pro's Nav Menu adds vertical layouts and pointer effects. WP Menu sets one trigger and dropdown effect for the whole menu; the Nav sets them per item and drills down on phones.
Who it's for
The people who get the most out of it, and what they use it for.
Building custom headers for each client.
Handing over sites where clients edit menus in WordPress.
With multi-level menus on phones.
FAQ
With Animation Addons Pro active, add the Animation Addons Nav to your header, select it, open Mobile Menu and turn on Enable Mobile Menu. Choose the Breakpoint where the hamburger replaces the navbar and a Drawer Position of Left or Right. Turn on Open Mobile Menu (Editor) to style the drawer while you build.
In the Animation Addons Nav, select a Nav Item and turn on Enable Dropdown. Choose a Trigger of Click or Hover and one of six Dropdown Animations, then add links under Sub-menu Items. Add a Nav Item inside the dropdown for a deeper level, or paragraphs for a richer panel.
Yes. In the Animation Addons Nav, open Menu Items and import any menu from Appearance > Menus. Turn on Auto-sync from WordPress, and new, renamed or deleted items in that menu update your published pages when the menu is saved. Your styling and items you added by hand are kept.
No, by design. Below the mobile Breakpoint, the Animation Addons Nav moves into its drawer, where parent items open their children as drill-down panels on tap, with a back link. Hover triggers and the six dropdown animations apply to the desktop navbar only, which keeps the phone menu predictable.
The Animation Addons Nav uses menubar and menuitem roles and updates expanded states as dropdowns open and close. Arrow keys, Home, End, Enter, Space and Escape work on desktop. In the mobile drawer, focus stays inside until it closes, Escape closes it, and animations are cut for visitors who prefer reduced motion.
The Animation Addons Nav loads one script and one stylesheet on pages that use it, and its links are plain HTML that search engines crawl. Only the Default (GSAP) dropdown animation uses GSAP; the other five are CSS. Pro's Lazy Animation and Performance Wizard keep the rest of the page light.
Use the free Animation Addons WP Menu to show an existing WordPress menu with Elementor 4 styling, dropdown effects and a mobile drawer. Use the Animation Addons Nav, part of Pro, for per-item elements and triggers, rich dropdown panels and drill-down submenus on phones.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Nav on the same page or template.
Atomic menu items, animated dropdowns and a drill-down mobile drawer.
