nav_menu_submenu_css_class │ filter-hook │ WP 4.8.0

Allows you to change the CSS classes added to nested ul elements (menu lists). The sub-menu class is added by default.

Example menu with two nested ul elements.

Structure:

• Vegetables
  • My article (nested item)
    • Another article (nested item)

Markup:

<div class="menu-second-menu-container">
	<ul id="menu-second-menu" class="menu">
		<li id="menu-item-317" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-317">
			<a href="http://wp-test.com/category/vegetables">Vegetables</a>
			<ul class="sub-menu">
				<li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-322">
					<a href="http://wp-test.com/my-article">My article</a>
					<ul class="sub-menu">
						<li id="menu-item-321" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-321">
							<a href="http://wp-test.com/another-article">Another article</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

Usage

add_filter( 'nav_menu_submenu_css_class', 'wp_kama_nav_menu_submenu_css_class_filter', 10, 3 );

/**
 * Function for `nav_menu_submenu_css_class` filter-hook.
 * 
 * @param string[] $classes Array of the CSS classes that are applied to the menu `<ul>` element.
 * @param stdClass $args    An object of `wp_nav_menu()` arguments.
 * @param int      $depth   Depth of menu item. Used for padding.
 *
 * @return string[]
 */
function wp_kama_nav_menu_submenu_css_class_filter( $classes, $args, $depth ){

	// filter...
	return $classes;
}

$classes(array)

CSS classes applied to nested ul elements. Example:

Array(
	[1] => sub-menu
)

$args(stdClass)

Object containing arguments from wp_nav_menu(). Example:

stdClass Object
(
	[menu] => WP_Term Object
		(
			[term_id] => 21
			[name] => My First Menu
			[slug] => my-first-menu
			[term_group] => 0
			[term_taxonomy_id] => 21
			[taxonomy] => nav_menu
			[description] =>
			[parent] => 0
			[count] => 3
			[filter] => raw
		)

	[container] => div
	[container_class] =>
	[container_id] =>
	[menu_class] => primary-menu
	[menu_id] =>
	[echo] => 1
	[fallback_cb] => wp_page_menu
	[before] =>
	[after] =>
	[link_before] =>
	[link_after] =>
	[items_wrap] => <ul id="%1$s" class="%2$s">%3$s</ul>
	[item_spacing] => preserve
	[depth] => 0
	[walker] =>
	[theme_location] => primary
)

$depth(int)

Menu item level. Added in version 4.1.0 and used for indentation. Top-level menu items have $depth = 0, their children have $depth = 1, and so on.

Examples

#1 Remove all CSS classes

add_filter( 'nav_menu_submenu_css_class', 'change_wp_nav_menu', 10, 3 );

function change_wp_nav_menu( $classes, $args, $depth ) {
	return [];
}

#2 Add CSS classes

add_filter( 'nav_menu_submenu_css_class', 'change_wp_nav_menu', 10, 3 );

// Option 1: add them to every menu.
function change_wp_nav_menu( $classes, $args, $depth ) {
	$classes[] = 'my-css-1';
	$classes[] = 'my-css-2';

	return $classes;
}

// Option 2: add them only to the menu assigned to the header-menu location.
function change_wp_nav_menu( $classes, $args, $depth ) {
	if ( $args->theme_location == 'header-menu' ) {
		$classes[] = 'my-css-1';
		$classes[] = 'my-css-2';
	}

	return $classes;
}

#3 Change CSS classes

add_filter( 'nav_menu_submenu_css_class', 'change_wp_nav_menu', 10, 3 );

function change_wp_nav_menu( $classes, $args, $depth ) {
	foreach ( $classes as $key => $class ) {
		if ( $class == 'sub-menu' ) {
			$classes[ $key ] = 'my-sub-menu';
		}
	}

	return $classes;
}