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.

Contents

Parameters

$classes string[]
Array of the CSS classes that are applied to the menu item's <li> element.
$menu_item WP_Post
The current menu item object.
$args stdClass
An object of wp_nav_menu() arguments.
More Arguments from wp_nav_menu( ... $args ) Array of nav menu arguments.
  • menuint|string|WP_Term
    Desired menu. Accepts a menu ID, slug, name, or object.
  • menu_classstring
    CSS class to use for the ul element which forms the menu.
    Default 'menu'.
  • menu_idstring
    The ID that is applied to the ul element which forms the menu.
    Default is the menu slug, incremented.
  • containerstring
    Whether to wrap the ul, and what to wrap it with.
    Default 'div'.
  • container_classstring
    Class that is applied to the container.
    Default 'menu-{menu slug}-container'.
  • container_idstring
    The ID that is applied to the container.
  • container_aria_labelstring
    The aria-label attribute that is applied to the container when it's a nav element.
  • fallback_cbcallable|false
    If the menu doesn't exist, a callback function will fire.
    Default is 'wp_page_menu'. Set to false for no fallback.
  • beforestring
    Text before the link markup.
  • afterstring
    Text after the link markup.
  • link_beforestring
    Text before the link text.
  • link_afterstring
    Text after the link text.
  • echobool
    Whether to echo the menu or return it. Default true.
  • depthint
    How many levels of the hierarchy are to be included.
    0 means all. Default 0.
    Default 0.
  • walkerobject
    Instance of a custom walker class.
  • theme_locationstring
    Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
  • items_wrapstring
    How the list items should be wrapped. Uses printf() format with numbered placeholders. Default is a ul with an id and class.
  • item_spacingstring
    Whether to preserve whitespace within the menu's HTML.
    Accepts 'preserve' or 'discard'. Default 'preserve'.
$depth int
Depth of menu item. Used for padding.

Top ↑

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 );
?>

Top ↑

Source

File: wp-includes/class-walker-nav-menu.php. View all references 

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

View on Trac View on GitHub

Top ↑

Top ↑

Changelog

Changelog
Version Description
4.1.0 The $depth parameter was added.
3.0.0 Introduced.

Top ↑

User Contributed Notes

  1. Skip to note 1 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 4You must log in to vote on the helpfulness of this note
    Contributed by Aamer Shahzad —

    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 );
  3. Skip to note 3 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note
    Contributed by Steven Lin —

    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 );
  4. Skip to note 4 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note
    Contributed by Steven Lin —

    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 );
  6. Skip to note 6 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note
    Contributed by Ahmad Karim —

    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 );
  7. Skip to note 7 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note
    Contributed by Md Afsar Uddin —

    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.