3 or more level menus in v6

[mrskater]

Hello, I would like to know how to get a menu like the demo site: https://dev.bootscore.me/?
With a main menu, a burger menu and multiple navbar toggler.
Thanks in advance.

[crftwrk]

Hi, we have several examples for v5, here is a new one for v6:

Step 1

Register a modified navwalker that allows more than 2 levels depth in child's functions.php:

/**
 * Register a navwalker that allows 3 ore more levels depth 
 * https://github.com/imanishpushkar/bs5-navwalker
 */
function bootscore_register_navwalker() {

   class bootstrap_5_wp_nav_menu_walker extends Walker_Nav_menu {
    private $current_item;
    private $dropdown_menu_alignment_values = [
      'dropdown-menu-start',
      'dropdown-menu-end',
      'dropdown-menu-sm-start',
      'dropdown-menu-sm-end',
      'dropdown-menu-md-start',
      'dropdown-menu-md-end',
      'dropdown-menu-lg-start',
      'dropdown-menu-lg-end',
      'dropdown-menu-xl-start',
      'dropdown-menu-xl-end',
      'dropdown-menu-xxl-start',
      'dropdown-menu-xxl-end'
    ];

    function start_lvl(&$output, $depth = 0, $args = null) {
      $dropdown_menu_class[] = '';
      foreach ($this->current_item->classes as $class) {
        if (in_array($class, $this->dropdown_menu_alignment_values)) {
          $dropdown_menu_class[] = $class;
        }
      }
      $indent = str_repeat("\t", $depth);
      $submenu = ($depth > 0) ? ' dropdown-submenu' : '';
      $output .= "\n$indent<ul class=\"dropdown-menu$submenu " . esc_attr(implode(" ", $dropdown_menu_class)) . " depth_$depth\">\n";
    }

    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
      $this->current_item = $item;

      $indent = ($depth) ? str_repeat("\t", $depth) : '';

      $li_attributes = '';
      $class_names = $value = '';

      $classes = empty($item->classes) ? array() : (array) $item->classes;

      $classes[] = ($args->walker->has_children) ? 'dropdown' : '';
      $classes[] = 'nav-item';
      $classes[] = 'nav-item-' . $item->ID;
      if ($depth && $args->walker->has_children) {
        $classes[] = 'dropdown-menu-child-item dropdown-menu-end at_depth_' . $depth;
      }

      $class_names =  join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
      $class_names = ' class="' . esc_attr($class_names) . '"';

      $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
      $id = strlen($id) ? ' id="' . esc_attr($id) . '"' : '';

      $output .= $indent . '<li ' . $id . $value . $class_names . $li_attributes . '>';

      $attributes  = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
      $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
      $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
      $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';

      /*$active_class = ($item->current || $item->current_item_ancestor || in_array("current_page_parent", $item->classes, true) || in_array("current-post-ancestor", $item->classes, true)) ? 'active' : '';
      $nav_link_class = ($depth > 0) ? 'dropdown-item ' : 'nav-link ';*/

      $active_class = ($item->current || $item->current_item_ancestor) ? 'active' : '';
      $nav_link_class = ( $depth > 0 ) ? 'dropdown-item ' : 'nav-link ';
      $attributes .= ( $args->walker->has_children ) ? ' class="'. $nav_link_class . $active_class . ' dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' : ' class="'. $nav_link_class . $active_class . '"';

      if ($args->walker->has_children) {
        $attributes .=  ' class="' . $nav_link_class . $active_class . ' dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" data-bs-auto-close="outside" aria-expanded="false"';
      } else {
        $attributes .=  ' class="' . $nav_link_class . $active_class . '"';
      }

      $item_output = $args->before;
      $item_output .= '<a' . $attributes . '>';
      $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
      $item_output .= '</a>';
      $item_output .= $args->after;

      $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
  }
}
add_action('after_setup_theme', 'bootscore_register_navwalker');

Step 2

Go in main-theme to folder template-parts/header/ and copy file main-menu.php to your child by using same folder structure. Open this file and change depth value to 3 or higher:

bootscore/template-parts/header/main-menu.php

Line 27 in de1ca68

'depth' => 2,

Step 3

Check that CSS classes are visible in the WP backend menu settings. Add dropstart or dropend class to the parent dropdown-toggler to show sub-sub-menu left or right. Check Bootstrap options.

Backend	Frontend

Step 4

Use provided filters from the Bootscore documentation to change the navbar breakpoints in child's functions.php. dev.bootscore has at this time navbar always collapsed:

/**
 * Header navbar breakpoint
 */
function header_navbar_breakpoint_class() {
  return "";
}
add_filter('bootscore/class/header/navbar/breakpoint', 'header_navbar_breakpoint_class', 10, 2);

/*
 * Header navbar toggler breakpoint
 */
function header_navbar_toggler_breakpoint_class() {
  return "";
}
add_filter('bootscore/class/header/navbar/toggler/breakpoint', 'header_navbar_toggler_breakpoint_class', 10, 2);

With a main menu, a burger menu and multiple navbar toggler.

Theme has only one main-menu and one navbar-toggler depending on the breakpoint.

Solved?

[FrankChandler]

I tried this, and other methods, bit if I have a dropdown with submenues, the submenues display on top of each other. For example this configuration ;

• ul
  • li /li
  • li
    • ul
      • li /li
      • li /li
    • /ul
  • /li
  • li
    • ul
      • i /li
      • li /li
    • /ul
  • /li
• /ul

The first image is the undesired, and the second is the desired. Small screen works fine.

[FrankChandler]

Here is the key: zfFOR6ICo6txR0oTjYmIezVNRLAm64U4
I am not sure it is needed. After following the steps in the comment on my live clean install, it is working. Sorry to be a pain. Could part of the problem be that instead of pasting the above navwalker in my functions.php I had copied the inc/navwalker.php from parent to my child theme and edited it there?

[crftwrk]

Looks good! 👍

[FrankChandler]

So a parent item would not click to the href. I added this to click on the link in custom.js:
if ($(window).width() > 768) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function() {
location.href = this.href;
});
}
if ($(window).width() < 767) {
$('.navbar .dropdown > a').click(function() {
location.href = this.href;
});
}
The added this css:
.dropdown-menu .dropdown-submenu{
right:100%;
top:0;
}
.dropend ul{
right: 0.1em;
}
@media screen and (max-width: 767px) {
.dropdown-menu{
display:block;
}
}

[crftwrk]

Works fine?

[FrankChandler]

yes it does.