Nanato Mega Menu

Create powerful mega menus using Gutenberg blocks with seamless navigation integration. Theme-agnostic design - works with any WordPress theme without requiring custom nav walkers.

• 🎨 Gutenberg Block Integration: Create mega menu content using custom blocks
• 📱 Mobile-First Design: Responsive with touch support and accessibility features
• 🎭 Theme-Agnostic: Works with any theme using standard WordPress navigation
• ♿ Accessibility Ready: Full ARIA support, keyboard navigation, and screen reader compatibility
• 🎯 Filter-Based: Uses WordPress hooks - no custom nav walker required
• 🎨 Custom Icons: Support for SVG icons and image uploads for dropdown indicators
• 👆 Flexible Triggers: Set hover or click trigger globally from plugin settings
• ⚙️ Admin Control: Enable/disable mega menu features per menu with admin settings

1. Upload the plugin files to /wp-content/plugins/nanato-mega-menu/
2. Activate the plugin through the 'Plugins' screen in WordPress
3. Go to Appearance > Menus to configure mega menus

1. Go to Mega Menus > Add New in your WordPress admin
2. Create content using the available blocks:
   • Mega Menu Columns: Container for column layouts
   • Mega Menu Column: Individual column with flexible content
   • WP Menu Nav: Display WordPress menus inside mega menu panels

1. Go to Appearance > Menus
2. For any menu item where you want a mega menu:
   • Mega Menu Content: Select your created mega menu content

1. Go to Mega Menus > Settings
2. Set Dropdown Trigger to either:
   • Hover (default)
   • Click
3. Set Dropdown Icon (optional):
   • Paste SVG code
   • Use an image URL/upload
   • Leave empty to use theme default indicator
4. Save settings to apply behavior across all mega menu items

No theme changes required! The plugin automatically works with any theme using standard WordPress navigation:

// Your theme's existing navigation code - no changes needed!
wp_nav_menu( array(
    'theme_location' => 'primary',
    'container'      => 'nav',
    'container_class'=> 'main-navigation',
    // No custom walker required!
) );

The plugin automatically:

• ✅ Adds mega menu CSS classes
• ✅ Injects mega menu content
• ✅ Handles accessibility attributes
• ✅ Manages trigger behavior
• ✅ Supports custom dropdown icons

The plugin provides minimal base styles. Override them in your theme:

/* Example theme overrides */
.mega-menu-panel {
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 2rem;
    z-index: 9999;
}

.wp-block-nanato-mega-menu-navigation-link a {
    color: #333;
    font-weight: 500;
    padding: 0.5rem 0;
}

.wp-block-nanato-mega-menu-navigation-link a:hover {
    color: #0073aa;
}

/* Custom dropdown indicator styling */
.nanato-mega-indicator {
    margin-left: 0.5rem;
    opacity: 0.7;
}

.nanato-mega-indicator-image {
    width: 16px;
    height: 16px;
    margin-left: 0.5rem;
}

The plugin uses WordPress navigation filters to provide mega menu functionality without requiring themes to use custom nav walkers:

• nav_menu_css_class - Adds mega menu CSS classes
• nav_menu_link_attributes - Adds accessibility attributes
• nav_menu_item_title - Adds dropdown indicators
• walker_nav_menu_start_el - Injects mega menu content
• nav_menu_item_attributes - Adds data attributes for JavaScript

This approach ensures maximum theme compatibility and future-proof functionality.

Container block for column layouts with flexible width options:

• Supports custom width and gap settings
• Responsive design
• Flexible alignment options

Individual column with flexible content support:

• Supports all WordPress core blocks
• Customizable width (auto, percentage, pixels)
• Vertical alignment options (top, center, bottom, stretch)
• Minimum height control

Display WordPress menus inside mega menu panels:

• Choose any registered WordPress menu
• Control menu orientation (vertical/horizontal)
• Configure maximum depth to display
• Show/hide dropdown indicators
• Supports responsive design

Paste SVG code directly in the Settings > Dropdown Icon field:

<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    <path d="M3 6l5 5 5-5H3z"/>
</svg>

• Click "Upload Image" to select from media library
• Supports PNG, JPG, SVG files
• Images are automatically sized appropriately

Leave the field empty to use your theme's default dropdown indicator.

• ARIA Attributes: Proper aria-expanded, aria-hidden, and aria-haspopup support
• Keyboard Navigation: Enter, Space, Arrow keys, and Escape key support
• Focus Management: Automatic focus trapping and restoration
• Screen Reader Support: Semantic markup and proper announcements
• Reduced Motion: Respects user's motion preferences
• High Contrast: Enhanced borders in high contrast mode

• Touch Events: Proper touch start/move/end handling
• Scroll Detection: Prevents accidental triggers while scrolling
• Orientation Support: Closes menus on device rotation
• Mobile-First CSS: Responsive design from mobile up
• Force Click: All triggers become click-based on mobile devices

• Modern browsers (Chrome, Firefox, Safari, Edge)
• WordPress 6.6+
• PHP 7.4+

The plugin automatically adds these CSS classes to your navigation:

• .has-mega-menu - Items with mega menus
• .nanato-mega-menu-item - Plugin-specific class
• .mega-menu-trigger-hover - Hover-triggered items
• .mega-menu-trigger-click - Click-triggered items
• .mega-menu-active - Currently open menu items

• .mega-menu-panel - The mega menu container
• .mega-menu-active - Currently visible panels
• .mega-menu__content-wrapper - Inner content wrapper

• .nanato-mega-indicator - Default dropdown indicator
• .nanato-mega-indicator-image - Custom image indicators

Listen for mega menu events in your theme:

// Mega menu opened
document.addEventListener('megaMenuOpen', function(e) {
    console.log('Mega menu opened', e.detail);
    // e.detail contains: { panel, trigger }
});

// Mega menu closed
document.addEventListener('megaMenuClose', function(e) {
    console.log('Mega menu closed', e.detail);
    // e.detail contains: { panel, trigger }
});

// Check if a menu item has a mega menu
$has_mega_menu = \Nanato_Mega_Menu\Menu_Fields::has_mega_menu($menu_item);

// Get mega menu content for a menu item
$mega_content = \Nanato_Mega_Menu\Menu_Fields::get_mega_menu_content($menu_item);

If you were previously using a custom nav walker approach, simply remove the walker parameter from your wp_nav_menu() calls:

// Before (with custom walker)
wp_nav_menu( array(
    'theme_location' => 'primary',
    'walker'         => new \Nanato_Mega_Menu\Nav_Walker(), // Remove this line
) );

// After (filter-based - automatic!)
wp_nav_menu( array(
    'theme_location' => 'primary',
    // That's it! Mega menus work automatically
) );

npm install
npm run build

nanato-mega-menu/
├── .github/
│   └── docs/                        # Documentation files
│       ├── folder-structure.md      # Detailed folder structure
│       └── version-management.md    # Version management guide
├── .scripts/                        # Automation scripts
│   ├── version-manager.js           # Version management
│   └── changelog-manager.js         # Changelog automation
├── Functions/                       # Modern PHP classes (PSR-4)
│   ├── Admin_Settings.php           # Admin settings page
│   ├── Enqueues.php                 # Asset enqueuing
│   ├── Menu_Fields.php              # Menu item custom fields
│   ├── Menu_Walker.php              # Custom menu walker
│   ├── Nav_Filters.php              # Navigation filters
│   ├── Plugin_Paths.php             # Path utilities
│   ├── Post_Types.php               # Custom post type
│   ├── Register_Blocks.php          # Block registration
│   └── Rest_Menus.php               # REST API endpoints
├── src/                             # Source files
│   ├── blocks/                      # Gutenberg blocks
│   │   ├── mega-menu-columns/       # Columns container block
│   │   ├── mega-menu-column/        # Individual column block
│   │   ├── wp-menu-nav/             # WordPress menu nav block
│   │   └── utils/                   # Shared block utilities
│   ├── scss/                        # SCSS styles
│   ├── nanato-mega-menu-editor-scripts.js  # Editor scripts
│   └── nanato-mega-menu-scripts.js  # Frontend scripts
├── build/                           # Compiled assets (generated)
│   ├── blocks/                      # Compiled block assets
│   ├── blocks-manifest.php          # Block metadata
│   ├── nanato-mega-menu-editor.js   # Compiled editor JS
│   ├── nanato-mega-menu.js          # Compiled frontend JS
│   └── nanato-mega-menu.css         # Compiled CSS
├── languages/                       # Translation files
│   └── nanato-mega-menu.pot
├── vendor/                          # Composer dependencies
├── CHANGELOG.md                     # Version history
├── composer.json                    # PHP dependencies
├── nanato-mega-menu.php             # Main plugin file
├── package.json                     # Node dependencies
├── README.md                        # This file
├── readme.txt                       # WordPress.org readme
└── webpack.config.js                # Build configuration

1. Follow WordPress coding standards
2. Use modern PHP (namespaces, PSR-4)
3. Write accessible, semantic HTML
4. Test on multiple devices and browsers
5. Include proper documentation

GPL-2.0-or-later

This plugin is designed to work automatically with any WordPress theme. If you encounter issues:

1. Ensure your theme uses wp_nav_menu() for navigation
2. Check that the menu location is properly registered
3. Verify mega menu content is published and assigned to menu items

For advanced customization, refer to the CSS classes and JavaScript events documentation above.