nav_menu_css_class – Hook | Developer.WordPress.org

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

View all references View on Trac View on GitHub

Used by	Description
Walker_Nav_Menu::start_el()`wp-includes/class-walker-nav-menu.php`	Starts the element output.

Changelog

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

User Contributed Notes

Skip to note 8 content

Aamer Shahzad 7 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 5You must log in to vote on the helpfulness of this note
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 );
```
Log in to add feedback

Steven Lin 5 years ago

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

Skip to note 10 content

Shah Alom 7 years ago

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
Basic Usage:
```
<?php 
function filter_handler( $classes, $item, $args, $depth ) { ...... }

add_filter( 'nav_menu_css_class', 'filter_handler', 10, 4 ); 
?>
```
Log in to add feedback
Skip to note 11 content

Steven Lin 5 years ago

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
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 );
```
Log in to add feedback
Skip to note 12 content

Ahmad Karim 5 years ago

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
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 );
```
Log in to add feedback

Mehedi 5 years ago

function wpdocs_menu_item_class( $classes, $item, $args ) {
    if ( 'topmenu' === $args->theme_location ) {
        $classes[] = 'list-inline-item';
    }

    return $classes;
}
add_action( 'nav_menu_css_class', 'wpdocs_menu_item_class', 10, 3 );

Skip to note 14 content

Md Afsar Uddin 3 years ago

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
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 );
```
Log in to add feedback

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

In this article

Parameters

More Information

Source

Changelog

User Contributed Notes

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

In this article

Parameters

More Information

Source

Related

Changelog

User Contributed Notes