Load whole widget area in WordPress menu

Question

I want to create very variable mega menu in WordPress. The idea is to use standard WP menu (register_nav_menus function) and new Gutenberg widgets. I created a main menu & widget area "mega-menu-1". Then I filled this widget area with various widgets (blocks) such as columns, images, paragraphs etc.

Now I would like to assign this menu to the first (or any other) item in the main menu. And I have no idea how. I didn't even find any tutorial doing this. There are some solutions for loading widgets "under" menu items, such as this one. But it just takes one particular widget and load it under the menu item. But I need to load whole widget area.

I guess it can somehow be done with the walker parameter in wp_nav_menu() function but I still need to be pushed the right direction :).

Is there please any way to achieve this?

Answer 1

First we need to extend Walker_Nav_Menu. Since you want to be in any item you want i would recommend using class to trigger.

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        // Check if the menu item has a specific class
        if (in_array('widget-area', $item->classes)) {
            
            ob_start();
            dynamic_sidebar('mega-menu-1');
            $sidebar_output = ob_get_clean();
            
            $output .= $sidebar_output;
        }
        
        parent::start_el($output, $item, $depth, $args, $id);
    }
}

In your menu you have to add walker param to use this Custom_Walker_Nav_Menu .

wp_nav_menu(array(
    'theme_location' => 'your_menu_location',
    'walker' => new Custom_Walker_Nav_Menu(),
));