M Media Smart Navigation Pro


M Media Smart Navigation Pro

Professional multi-level navigation with mega menus, smart behaviors, and accessibility.
The intelligent choice for modern WordPress sites.

Tested up to 6.8
Stable: 1.0.0
PHP 7.4+
GPLv2+

Mega Menus
Keyboard + ARIA
Dark-mode aware
Bootstrap 5 ready
Performance optimized

Why choose Smart Navigation Pro?

Other navigation plugins can be bloated, confusing, or hide essentials behind paywalls.
Smart Navigation Pro delivers enterprise-level features at an affordable price,
with zero bloat and maximum performance.

  • Unlimited depth multi-level dropdowns
  • Mega menus with a single class: mega
  • Smart color system with contrast-safe outputs
  • Hover/click behaviors, autoclose options, keyboard nav
  • Clean, production-ready markup (a11y-first)

Accessibility First:
Full keyboard navigation (Up/Down/Left/Right, Enter, Esc), ARIA attributes, focus management,
and sensible tab order so menus are actually usable for everyone.

Key features

Unlimited Levels

Deeply nested submenus stay organized and accessible, with intelligent positioning and RTL-friendly flipping.

Mega Menus (1 class)

Add mega to any top-level item. Its children become columns; grandchildren are links.

Columns are configurable in Appearance → Smart Navigation Pro.

Smart Color System

Centralize brand colors: top-level, hover, active, submenu background, link, hover, dividers—contrast-safe by design.

Keyboard + ARIA

Arrow keys to navigate, Enter to open, Esc to close—ARIA attributes applied automatically for screen readers.

Smart Behaviors

Hover on desktop (optional), click on touch, autoclose outside/inside/disabled via classes:

  • dropdown-autoclose-inside
  • dropdown-autoclose-outside
  • dropdown-autoclose-false

Dark Mode + Performance

CSS variables respect prefers-color-scheme. Minimal footprint, Bootstrap 5-friendly, fast by default.

Setup in minutes

Configure
  1. Activate the plugin in Plugins.
  2. Go to Appearance → Smart Navigation Pro.
  3. List the menu locations to enhance (e.g., main-menu, footer-menu).
  4. Adjust colors and behaviors to match your brand.

Your existing wp_nav_menu() calls for those locations automatically use the smart walker.

Use (Shortcode or Location)

Shortcode (anywhere):

Alignment classes honored on parents:

dropdown-menu-end, dropdown-menu-sm-end, dropdown-menu-md-end, ...

Dividers & headers: use - (or divider) and dropdown-header or Title Attribute header.

Mega menu in three clicks

  1. In Appearance → Menus, add class mega to a top-level item (e.g., “Products”).
  2. Its children (depth 1) become column headings.
  3. Their children (depth 2) are the links within each column.

Set the column count in Appearance → Smart Navigation Pro. Submenus remain keyboard-navigable and a11y-friendly.

Frequently Asked Questions

Does it work with all themes?
Yes. It uses modern, standards-based markup with minimal CSS that adapts to professionally built themes (and Bootstrap 5).
Can I use it on multiple menus?
Absolutely. Add multiple locations in settings (comma-separated) or use the shortcode multiple times.
How do I add a mega menu?
Add class mega to a top-level item. Its children become columns; grandchildren are links. Configure column count in settings.
How do I add a divider or header?
  • Divider: add a child with title - or class divider.
  • Header: add class dropdown-header or set the item’s Title Attribute to header.
What about alignment and autoclose?
Alignment classes like dropdown-menu-end are honored. Autoclose behavior can be set globally and overridden per item with:
dropdown-autoclose-inside, dropdown-autoclose-outside, or dropdown-autoclose-false.
Is it dark-mode aware?
Yes. CSS variables respect prefers-color-scheme. Submenus flip direction in RTL automatically.

Installation

  1. Upload the plugin folder to /wp-content/plugins/ or install via Plugins → Add New → Upload Plugin.
  2. Activate M Media Smart Navigation Pro in Plugins.
  3. Open Appearance → Smart Navigation Pro to add locations, colors, and behaviors.
  4. (Optional) Add mega class to any top-level item to enable a mega menu.

Screenshots

  1. Settings page with color pickers and behavior controls
  2. Multi-level dropdown menu in action
  3. Mega menu with multiple columns
  4. Mobile-responsive navigation

Changelog

1.0.0

  • Initial release
  • Unlimited multi-level dropdown support
  • Mega menu functionality (class mega)
  • Smart color customization system
  • Keyboard/ARIA accessibility and smart behaviors
  • Bootstrap 5-friendly performance and styling

Ship a smarter menu in minutes

Mega menus, accessibility, and performance—without the bloat.