Nav Menu
Your website’s menu is its roadmap. Don’t settle for a boring, basic one. Master Addons Navigation Menu element gives you complete creative and technical control to build the exact menu your site deserves. Go far beyond simple links. Create horizontal, vertical, dropdown, popup, or offcanvas menus. Style every single state and level with pixel-perfect precision. Add smooth pointer animations, design a perfect mobile toggle, and integrate it seamlessly with the powerful Mega Menu extension. It’s not just a menu – it’s a cornerstone of your site’s UX, brand, and conversion path, and it’s all available for free.
Choose from 5+ Menu Types for Any Design
Fit your menu perfectly into any header, sidebar, or hero section. Select a classic Horizontal top bar, a sleek Vertical sidebar, or a compact Dropdown. For mobile-first designs or immersive experiences, use the Popup (modal) or Offcanvas (sliding panel) types. Each layout comes with dedicated controls for Dropdown Position, Min Width, and Alignment, letting you place the menu exactly where it needs to be.
- Multiple Layouts: Horizontal, Vertical, Dropdown, Popup, and Offcanvas types for total design freedom.
- Advanced Dropdown Control: Set dropdowns to Overlap Content (absolute positioning) and fine-tune their width and alignment.
- Mega Menu Ready: Seamlessly integrates with the Master Addons Mega Menu extension for content-rich navigation.
Design Every Level and Interaction Individually
Achieve a truly polished look by styling each part of the menu independently. You have separate style tabs for Main Menu Items, the Dropdown List container, Dropdown Items, and even custom styles for Sublevel items. For each, define unique colors, backgrounds, typography, padding, borders, and shadows for their Normal, Hover, and Active states. This level of detail ensures perfect visual feedback and brand consistency.
- Deep State Control: Design the unique look of menu items when idle, hovered over, and when on the active page.
- Container Styling: Style the background, border, and shadow of the entire dropdown list separately from the items inside it.
- Sublevel Overrides: Apply different styles to second-level dropdown items for clear visual hierarchy.
Interactive Effects & Mobile-First Toggle
Enhance the user experience with subtle motion. Add Pointer Animations to menu items, choosing from effects like Underline, Background, or Text with directions like Sweep or Grow. For mobile, design a fully customizable Toggle Switch button. Choose its Type (Icon, Text, or Both), View (Stacked, Framed), and Shape (Square, Circle), and style its normal and active states. This ensures your menu is engaging on desktop and flawless on mobile.
- Engaging Pointer Effects: Use animated underlines or background fills on hover to guide the user’s eye.
- Professional Mobile Toggle: Don’t settle for a boring hamburger icon. Design a toggle switch that matches your site’s personality.
- Smooth Transitions: Control the Transition Duration of all hover and open/close animations.
Advanced Technical Controls & Responsive Logic
Control exactly how your menu behaves across the responsive breakpoints. Set the Breakpoint where the menu collapses into the mobile toggle. Use the Overlap Content setting strategically for dropdowns. Adjust the Gap from Top for dropdown positioning and the Space Between menu items. These technical controls ensure your menu is not just beautiful, but also strong and functional on every device.
- Responsive Breakpoints: Define the exact screen width at which your desktop menu switches to the mobile toggle view.
- Perfect Positioning: Control dropdown spacing and alignment to prevent awkward overlaps or misplacement.
- Structured Spacing: Adjust horizontal/vertical padding and space between items for optimal readability and touch targets.
Frequently Asked Questions For Nav Menu
How is this different from other Nav Menu widgets?
Other plugins Nav Menu widget offers limited styling – mostly just text color and typography. Master Addons version offer everything you can imagine with your nav menu. Key differences include: 5 layout types (Popup, Offcanvas), separate styling for every menu level and state, custom pointer animations, a fully styleable mobile toggle, dropdown width/position controls, and seamless Mega Menu integration.
Can I use this menu with the Mega Menu extension?
Yes, they are designed to work together perfectly. You build your mega menu content using the Mega Menu extension in the WordPress menu admin. Then, you display it on the front end using this Navigation Menu element. Just select the menu you created in the “Select Menu” dropdown.
Is it difficult to set up the different styles for normal, hover, and active?
Not at all. The interface is visual and organized. Simply go to the Style tab, choose a part of the menu (e.g., “Main Menu Item”), and you’ll see clear tabs for Normal, Hover, and Active. You can set colors, backgrounds, etc., for each state independently. It’s very intuitive.
What's the best use case for the "Offcanvas" or "Popup" menu type?
These are ideal for maximizing screen real estate and creating a focused experience.
- Offcanvas: Perfect for mobile menus that slide in from the left or right. Also great for desktop “sidebar” navigation in minimalist designs.
- Popup: Useful for feature-rich menus that appear as a modal overlay in the center of the screen, often used for full-site navigation on portfolio or creative agency sites.
Will this menu work with my existing WordPress theme's header?
In most cases, yes. However, for the best results and to avoid conflicts, it is recommended to use Master Addons Theme Builder to build your header from scratch. This gives you a clean canvas to place the Master Addons Navigation Menu element without inherited styles from your theme causing issues.
Can I have a different menu style on mobile vs. desktop?
Absolutely. Using Elementor’s responsive editing mode, you can change almost any setting for tablet and mobile views. For example, you can switch from a Horizontal layout on desktop to a Dropdown layout on tablet, increase font sizes for mobile, or adjust the toggle button’s padding. The controls are fully responsive.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
