I've this DOM here:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#">Item</a>
    </li>
</ul>

What I need to do is, to add a custom class (has-ripple) to only the sub-menu > a items:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#" class="has-ripple">Item</a>
    </li>
</ul>

This is what I've tried:

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 3 );
function nav_menu_link_class( $atts, $item, $args ) {
    $class         = 'has-ripple';
    $atts['class'] = $class;

    return $atts;
}

This works but it also add the class to non-submenu a items outside of the dropdown. So how can I do this right?

I've this DOM here:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#">Item</a>
    </li>
</ul>

What I need to do is, to add a custom class (has-ripple) to only the sub-menu > a items:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#" class="has-ripple">Item</a>
    </li>
</ul>

This is what I've tried:

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 3 );
function nav_menu_link_class( $atts, $item, $args ) {
    $class         = 'has-ripple';
    $atts['class'] = $class;

    return $atts;
}

This works but it also add the class to non-submenu a items outside of the dropdown. So how can I do this right?

• php
• menus
• navigation

2 Answers 2

To be applied to sub-menu items only, your code should be:

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 2 );
function nav_menu_link_class( $atts, $item ) {
    if( !$item->has_children && $item->menu_item_parent > 0 ) {
        $class         = 'has-ripple';
        $atts['class'] = $class;
    }

    return $atts;
}

Try this : Documentation

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 4 );

function nav_menu_link_class(  $atts, $item, $args, $depth ) {

      if ( 0 !== $depth ) {
         $class         = 'has-ripple';
         $atts['class'] = $class;
      }
    return $atts;
}

I hope this may help.