Bootstrap 4 Navwalker Megamenu

Hello people,

Does anyone knows how to create a megamenu in Sage 9 using MWDelaney/sage-bootstrap4-navwalker?

Thanks in advance!

Hey @Jose_Paulino,

I don’t think MWDelaney/sage-bootstrap4-navwalker supports mega menu by default without editing source code.

This is true, but I’ve done some pretty cool mega-menu-style things with it just using filters and styling!

For instance, here’s how to append a blade view to the beginning (or end) of a dropdown:

<?php
// app/navigation.php
namespace App;

/**
 * Add "card" to top-level primary dropdown items
 * Add a dummy navigation item with a predictable class for replacement later
 */
add_filter('wp_nav_menu_objects', function ($items, $args) {
    // Make a unique identifier
    $item_count = count($items) + 1;

    // If this is the "primary" navigation defined by the theme
    if ($args->theme_location == 'primary_navigation') {
        // Loop through each item
        foreach ($items as $item) {
            // If this is a top-level item...
            if ($item->menu_item_parent == 0) {
                // Append a dummy menu item to this item's children so we can style it later
                $items[] = (object) array(
                  'ID'                => $item_count + 100000, // Some big ID that WP can not use
                  'title'             => $item->title, // Parent item's title
                  'url'               => $item->url, // Parent item's URL
                  'menu_item_parent'  => $item->ID, // Parent item's ID
                  'description'       => $item->description, // Parent item's description
                  'classes'           => ['nav-item-card'], // Predictable class for use later
                  'menu_order'        => 0,
                  'type'              => '',
                  'object'            => '',
                  'object_id'         => '',
                  'db_id'             => '',
                  'post_title'        => '',
                );
            }
        }
    }

    // Return the updated items
    return $items;
}, 10, 2);


/**
 * Replace the dummy menu item with custom output
 */
add_filter('walker_nav_menu_start_el', function ($item_output, $item, $depth, $args) {
    // If this item has our dummy item class
    if (in_array('nav-item-card', $item->classes)) {
        // Set up template data from the item's data set in a previous filter
        $data = [
          'title' => $item->title,
          'description' => $item->description,
          'url' => $item->url
        ];

        // Replace the markup for this item with a view from our theme
        $item_output = \Roots\view('partials.navigation.nav-item-card', $data)->render();
    }

    // Return the replaced output
    return $item_output;
}, 10, 4);

The navwalker gives you the classes and stricture for a solid nav menu. The rest of a “mega-menu” is better handled by other filters, as shown here!

2 Likes

This topic was automatically closed after 42 days. New replies are no longer allowed.