Hello people,
Does anyone knows how to create a megamenu in Sage 9 using MWDelaney/sage-bootstrap4-navwalker
?
Thanks in advance!
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!
This topic was automatically closed after 42 days. New replies are no longer allowed.