WP Menu Walker

I’m working on a WordPress website where I have a menu. In this menu I need a different submenu output based on the url/page id (or any other parameter) of a menu item. If it’s possible, I don’t like to do it on the order of the menu (for example, the second and last menu item).

The output I’m looking for is:

<nav class="nav">
    <ul>
        <li>
            <a href="#">Campers<span class="js-trigger-dropdown"><i class="fas fa-sort-down"></i></span></a>
            <div class="dropdown">
                <ul>
                    <li>
                        <a href="#">
                            <div class="dropdown__image"><img src="assets/images/temp/dropdown-img-1@2x.png" alt=""></div>                                          
                            <div class="dropdown__content">
                                <h6>Volkswagen T2b</h6>                                         
                                <p>Rood</p>
                            </div>
                        </a>
                    </li>                   
                </ul>
            </div>
        </li>
        <li><a href="#">Over evan</a></li>      
        <li><a href="#">Blog</a></li>       
        <li>
            <a href="#">
                Help<span class="js-trigger-dropdown"><i class="fas fa-sort-down"></i></span>
            </a>
            <div class="dropdown dropdown--secondary">
                <ul>
                    <li><i class="fas fa-arrow-right"></i><a href="#">Contact</a></li>
                    <li><i class="fas fa-arrow-right"></i><a href="#">Routebeschrijving</a></li>
                    <li><i class="fas fa-arrow-right"></i><a href="#">FAQ</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

You can see that the two submenu levels have a slightly different output.

The Walker class i’m currently working with is:

class CSS_Menu_Maker_Walker extends Walker {

  var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

  function start_lvl( &$output, $depth = 0, $args = array(), $top_level_elements = array() ) {

    $indent = str_repeat( "\t", $depth );
    if ($args->walker->has_children) {
        $output .= "\n$indent<div class=\"dropdown\"><ul>\n";
    } else {
        $output .= "\n$indent<ul>\n";
    }

  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);

    if ($args->walker->has_children) {
        $output .= "$indent</div></ul>\n";      
    } else {
        $output .= "$indent</ul>\n";
    }
    
  }

  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $class_names = $value = '';        
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    /* Add active class */
    if(in_array('current-menu-item', $classes)) {
      $classes[] = 'active';
      unset($classes['current-menu-item']);
    }

    /* Check for children */
    $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
    if (!empty($children)) {
      $classes[] = 'has-sub';
    }

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

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

    $output .= $indent . '<li' . $class_names .'>';

    $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        ) .'"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';    
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    if ($args->walker->has_children) {
        $item_output .= '<span class="js-trigger-dropdown"><i class="fas fa-sort-down"></i></span></a>';
    } else {
        $item_output .= '</a>';
    }

    $item_output .= $args->after;

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

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "</li>\n";
  }
}

Looking forward to getting some help 🙂