apply_filters( ‘nav_menu_css_class’, string[] $classes, WP_Post $menu_item, stdClass $args, int $depth )

Filters the CSS classes applied to a menu item’s list item element.

Parameters

$classesstring[]
Array of the CSS classes that are applied to the menu item’s <li> element.
$menu_itemWP_Post
The current menu item object.
$argsstdClass
An object of wp_nav_menu() arguments.
More Arguments from wp_nav_menu( … $args )Array of nav menu arguments.
  • menu int|string|WP_Term
    Desired menu. Accepts a menu ID, slug, name, or object.
  • menu_class string
    CSS class to use for the ul element which forms the menu.
    Default 'menu'.
  • menu_id string
    The ID that is applied to the ul element which forms the menu.
    Default is the menu slug, incremented.
  • container string
    Whether to wrap the ul, and what to wrap it with.
    Default 'div'.
  • container_class string
    Class that is applied to the container.
    Default ‘menu-{menu slug}-container’.
  • container_id string
    The ID that is applied to the container.
  • container_aria_label string
    The aria-label attribute that is applied to the container when it’s a nav element.
  • fallback_cb callable|false
    If the menu doesn’t exist, a callback function will fire.
    Default is 'wp_page_menu'. Set to false for no fallback.
  • before string
    Text before the link markup.
  • after string
    Text after the link markup.
  • link_before string
    Text before the link text.
  • link_after string
    Text after the link text.
  • echo bool
    Whether to echo the menu or return it. Default true.
  • depth int
    How many levels of the hierarchy are to be included.
    0 means all. Default 0.
    Default 0.
  • walker object
    Instance of a custom walker class.
  • theme_location string
    Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
  • items_wrap string
    How the list items should be wrapped. Uses printf() format with numbered placeholders. Default is a ul with an id and class.
  • item_spacing string
    Whether to preserve whitespace within the menu’s HTML.
    Accepts 'preserve' or 'discard'. Default 'preserve'.
$depthint
Depth of menu item. Used for padding.

More Information

This filter hook called by the WordPress Walker_Nav_Menu class.

Usage in WP 3.0 / 3.1+ / 4.1+:

<?php
/* WP 3.0+ */
function filter_handler( $classes , $item ) { ...... }

add_filter( 'nav_menu_css_class', 'filter_handler', 10, 2 );

/* WP 3.1+ */
function filter_handler( $classes , $item, $args ) { ...... }

add_filter( 'nav_menu_css_class', 'filter_handler', 10, 3 );

/* WP 4.1+ */
function filter_handler( $classes, $item, $args, $depth ) { ...... }

add_filter( 'nav_menu_css_class', 'filter_handler', 10, 4 );
?>

Source

$class_names = implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $menu_item, $args, $depth ) );

Changelog

VersionDescription
4.1.0The $depth parameter was added.
3.0.0Introduced.

User Contributed Notes

  1. Skip to note 8 content

    Apply classes to a specific menu (theme location). WordPress 4.1 or higher.

    function wpdocs_channel_nav_class( $classes, $item, $args ) {
    
    	if ( 'network-menu' === $args->theme_location ) {
    		$classes[] = "network-menu-item";
        }
    
    	return $classes;
    }
    add_filter( 'nav_menu_css_class' , 'wpdocs_channel_nav_class' , 10, 4 );
  2. Skip to note 9 content

    Example code migrated from Codex:

    You can use information from the $args parameter to conditionally filter classes based on properties of the menu that contains the items.

    function my_secondary_menu_classes( $classes, $item, $args ) {
        // Only affect the menu placed in the 'secondary' wp_nav_bar() theme location
        if ( 'secondary' === $args->theme_location ) {
            // Make these items 3-columns wide in Bootstrap
            $classes[] = 'col-md-3';
        }
    
        return $classes;
    }
    
    add_filter( 'nav_menu_css_class', 'my_secondary_menu_classes', 10, 3 );
  3. Skip to note 11 content

    Example migrated from Codex:

    The following example adds a unique CSS class to a single, specific nav menu item.

    function my_special_nav_class( $classes, $item ) {
    
        if ( is_single() && $item->title == 'Blog' ) {
            $classes[] = 'special-class';
        }
    
        return $classes;
    
    }
    
    add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );
  4. Skip to note 12 content

    This example adds the menu items title (slug) as a class to every menu item.

    function wpdocs_menu_item_title_css_class( $classes, $item ) {
      $classes[] = 'menu-item_' . sanitize_html_class( sanitize_title( $item->title ) );
      return $classes;
    }
    add_filter( 'nav_menu_css_class', 'wpdocs_menu_item_title_css_class', 10, 2 );
  5. Skip to note 14 content

    Into wp nav li additional class add, it will support wordpress 4.1 or higher

    function wpdocs_nav_on_li_class( $classes, $item, $args ) {
    
        if ( 'menu-1' === $args->theme_location ) {
            $classes[] = "header__menu--link";
        }
    
        return $classes;
    }
    add_filter( 'nav_menu_css_class', 'wpdocs_nav_on_li_class', 10, 3 );

You must log in before being able to contribute a note or feedback.