How to use nav_menu_submenu_css_class filter in WordPress

nav_menu_submenu_css_class Filter

Filters the CSS class(es) applied to a menu list element.

To use nav_menu_submenu_css_class filter, first you have to register it using add_filter. You can write this code into functions.php of your activated theme or in a custom WordPress Plugin.

It’s always a good idea to create a custom WordPress Plugin while using hooks so nothing breaks when you update your WordPress Theme in the future.

In the below live example, we have defined a function weplugins_modify_nav_menu_submenu_css_class_defaults which takes 3 parameters and we registered it using add_filter. The first parameter nav_menu_submenu_css_class is the name of the hook. The second parameter weplugins_modify_nav_menu_submenu_css_class_defaults is the name of the function which needs to be called. The third parameter is the priority of calling the hook if the same hook is used multiple times and the last parameter is the number of arguments (if any) to be passed in the registered function.

Sometimes, you have to remove a registered hook so you can use remove_filter to remove the nav_menu_submenu_css_class filter.

Parameters

Below are the 3 parameters required to use this hook.

• $classes : (string[]) Array of the CSS classes that are applied to the menu <ul> element.
• $args : (stdClass) An object of wp_nav_menu() arguments.
• $depth : (int) Depth of menu item. Used for padding.

Live Examples

Example 1: Adding a Custom CSS Class to Submenu

Below is an example of how you can use this hook to add a custom CSS class to the submenu.

    function weplugins_custom_dropdown_class( $classes ) {
        $classes[] = 'dropdown';
        return $classes;
    }
    add_filter( 'nav_menu_submenu_css_class', 'weplugins_custom_dropdown_class' );
    

Example 2: Modifying Submenu Classes Conditionally

In this example, we modify the submenu classes based on specific conditions.

    function weplugins_modify_nav_menu_submenu_css_class_defaults($classes, $args, $depth) { 
        // Update the $classes variable according to your website requirements and return this variable. You can modify the $classes variable conditionally too if you want.
        return $classes; 
    }
    // add the filter
    add_filter( "nav_menu_submenu_css_class", "weplugins_modify_nav_menu_submenu_css_class_defaults", 10, 3 );
    

Example 3: Removing a Hook Callback

To remove a hook callback, use the example below.

    remove_filter( "nav_menu_submenu_css_class", "weplugins_modify_nav_menu_submenu_css_class_defaults", 10, 3 );
    

Please make sure to provide the same callback function name, priority, and number of arguments while removing the hook callback.

Contact Us

If you need any customization or are having trouble using this hook, please contact us and we’d be happy to assist you.