Title: nav_menu_css_class Published: April 25, 2014 Last modified: April 28, 2025 --- # apply_filters( ‘nav_menu_css_class’, string[] $classes, WP_Post $menu_item, stdClass $args, int $depth ) ## In this article * [Parameters](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#parameters) * [More Information](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#more-information) * [Source](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#source) * [Related](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#related) * [Changelog](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#changelog) * [User Contributed Notes](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#user-contributed-notes) [ Back to top](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#wp--skip-link--target) Filters the CSS classes applied to a menu item’s list item element. ## 󠀁[Parameters](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#parameters)󠁿 `$classes`string[] Array of the CSS classes that are applied to the menu item’s `
  • ` element. `$menu_item`[WP_Post](https://developer.wordpress.org/reference/classes/wp_post/) The current menu item object. `$args`stdClass An object of [wp_nav_menu()](https://developer.wordpress.org/reference/functions/wp_nav_menu/) arguments. More Arguments from wp_nav_menu( … $args ) Array of nav menu arguments. * `menu` int|string|[WP_Term](https://developer.wordpress.org/reference/classes/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()](https://developer.wordpress.org/reference/functions/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'`. `$depth`int Depth of menu item. Used for padding. ## 󠀁[More Information](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#more-information)󠁿 This filter hook called by the WordPress [Walker_Nav_Menu](https://developer.wordpress.org/reference/classes/walker_nav_menu/) class. **Usage in WP 3.0 / 3.1+ / 4.1+**: ```php ``` ## 󠀁[Source](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#source)󠁿 ```php $class_names = implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $menu_item, $args, $depth ) ); ``` [View all references](https://developer.wordpress.org/reference/files/wp-includes/class-walker-nav-menu.php/) [View on Trac](https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/class-walker-nav-menu.php#L194) [View on GitHub](https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/class-walker-nav-menu.php#L194-L194) ## 󠀁[Related](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#related)󠁿 | Used by | Description | | [Walker_Nav_Menu::start_el()](https://developer.wordpress.org/reference/classes/walker_nav_menu/start_el/)`wp-includes/class-walker-nav-menu.php` | Starts the element output. | ## 󠀁[Changelog](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#changelog)󠁿 | Version | Description | | [4.1.0](https://developer.wordpress.org/reference/since/4.1.0/) | The `$depth` parameter was added. | | [3.0.0](https://developer.wordpress.org/reference/since/3.0.0/) | Introduced. | ## 󠀁[User Contributed Notes](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#user-contributed-notes)󠁿 1. [Skip to note 8 content](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#comment-content-2962) 2. [Aamer Shahzad](https://profiles.wordpress.org/talentedaamer/) [ 7 years ago ](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/#comment-2962) 3. [You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-2962) Vote results for this note: 5[You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-2962) 4. Apply classes to a specific menu (theme location). WordPress 4.1 or higher. 5. ```php 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 ); ``` 6. [Log in to add feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%3Freplytocom%3D2962%23feedback-editor-2962) 7. [Skip to note 9 content](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#comment-content-4285) 8. [Steven Lin](https://profiles.wordpress.org/stevenlinx/) [ 6 years ago ](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/#comment-4285) 9. [You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-4285) Vote results for this note: 2[You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-4285) 10. Example code migrated from Codex: 11. You can use information from the `$args` parameter to conditionally filter classes based on properties of the menu that contains the items. 12. ```php 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 ); ``` 13. [Log in to add feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%3Freplytocom%3D4285%23feedback-editor-4285) 14. [Skip to note 10 content](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#comment-content-2761) 15. [Shah Alom](https://profiles.wordpress.org/shahalom/) [ 8 years ago ](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/#comment-2761) 16. [You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-2761) Vote results for this note: 1[You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-2761) 17. Basic Usage: 18. ```php ``` 19. [Log in to add feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%3Freplytocom%3D2761%23feedback-editor-2761) 20. [Skip to note 11 content](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#comment-content-4284) 21. [Steven Lin](https://profiles.wordpress.org/stevenlinx/) [ 6 years ago ](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/#comment-4284) 22. [You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-4284) Vote results for this note: 1[You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-4284) 23. Example migrated from Codex: 24. The following example adds a unique CSS class to a single, specific nav menu item. 25. ```php 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 ); ``` 26. [Log in to add feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%3Freplytocom%3D4284%23feedback-editor-4284) 27. [Skip to note 12 content](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#comment-content-5082) 28. [Ahmad Karim](https://profiles.wordpress.org/ahmadkarim/) [ 5 years ago ](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/#comment-5082) 29. [You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-5082) Vote results for this note: 1[You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-5082) 30. This example adds the menu items title (slug) as a class to every menu item. 31. ```php 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 ); ``` 32. [Log in to add feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%3Freplytocom%3D5082%23feedback-editor-5082) 33. [Skip to note 13 content](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#comment-content-4894) 34. [Mehedi](https://profiles.wordpress.org/heymehedi/) [ 5 years ago ](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/#comment-4894) 35. [You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-4894) Vote results for this note: 0[You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-4894) 36. ```php 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 ); ``` 37. [Log in to add feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%3Freplytocom%3D4894%23feedback-editor-4894) 38. [Skip to note 14 content](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/?output_format=md#comment-content-5983) 39. [Md Afsar Uddin](https://profiles.wordpress.org/afsarbd/) [ 4 years ago ](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/#comment-5983) 40. [You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-5983) Vote results for this note: 0[You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%23comment-5983) 41. Into wp nav li additional class add, it will support wordpress 4.1 or higher 42. ```php 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 ); ``` 43. [Log in to add feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F%3Freplytocom%3D5983%23feedback-editor-5983) You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fnav_menu_css_class%2F) before being able to contribute a note or feedback.