apply_filters( ‘nav_menu_link_attributes’, array $atts, WP_Post $menu_item, stdClass $args, int $depth )

User Contributed Notes

1. Skip to note 8 content

   Steven Lin 4 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note

   Example migrated from Codex:

   The following example adds an attribute to specific menu items (34 and 39). Specify the ID of each menu item as an array.

   function add_specific_menu_atts( $atts, $item, $args ) {
   	$menu_items = array(34,39);
   	if (in_array($item->ID, $menu_items)) {
   	  $atts['onClick'] = 'return false';
   	}
   	
       return $atts;
   }
   add_filter( 'nav_menu_link_attributes', 'add_specific_menu_atts', 10, 3 );

   In the simplest instance above, the filter adds the attribute to all menu items of all menus. In case you only want to add the attributes to a certain menu location, you can check for menu location in a conditional.
2. Skip to note 9 content

   Steven Lin 4 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note

   Example migrated from Codex:

   The following function adds a class attribute to all <a> tags in a particular menu location (‘primary’).

   function add_specific_menu_location_atts( $atts, $item, $args ) {
       // check if the item is in the primary menu
       if( $args->theme_location == 'primary' ) {
         // add the desired attributes:
         $atts['class'] = 'menu-link-class';
       }
       return $atts;
   }
   add_filter( 'nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3 );
3. Skip to note 10 content

   Justin Kopepasah 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

   The default Walker menu does not include a class attribute on the anchor (<a>) element, but one can easily be added using this filter.

   function add_class_to_all_menu_anchors( $atts ) {
   	$atts['class'] = 'menu-item-anchor';
   
       return $atts;
   }
   add_filter( 'nav_menu_link_attributes', 'add_class_to_all_menu_anchors', 10 );

   You might notice there that I am only passing one parameter ($atts) to the function. This is because we only need the $atts in this case and there is no need to pass other parameters. Alternatively, let’s say we wanted to add a class to all anchors which are not top level:

   function add_class_to_non_top_level_menu_anchors( $atts, $item, $args, $depth ) {
   	if ( 0 !== $depth ) {
   		$atts['class'] = 'menu-item-anchor-non-top';
   	}
   
   	return $atts;
   }
   add_filter( 'nav_menu_link_attributes', 'add_class_to_non_top_level_menu_anchors', 10, 4 );

   In this case, we need to pass all four parameters because we are using the $depth parameter.
4. Skip to note 11 content

   Steven Lin 4 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

   Example migrated from Codex:

   The following example adds an attribute to all <a> tags in the wp_nav_menu

   function add_menu_atts( $atts, $item, $args ) {
   	$atts['onClick'] = 'return true';
       return $atts;
   }
   add_filter( 'nav_menu_link_attributes', 'add_menu_atts', 10, 3 );
5. Skip to note 12 content

   Steven Lin 4 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

   Example migrated from Codex:

   The following function adds a class to all menu items that have “Open link in a new window/tab” checked in the menu options.

   function add_class_to_target_blank_menu_items( $atts, $item, $args ) {
       // check if the item is set to target="_blank"
       if ( $item->target == '_blank' ) {
         // add the desired attributes:
         $atts['class'] = 'target-blank';
       }
       return $atts;
   }
   add_filter( 'nav_menu_link_attributes', 'add_class_to_target_blank_menu_items', 10, 3 );
6. Skip to note 13 content

   Muhammad Ayoub 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

   I have solution to add class to anchor tag.

   1: Step: add this in functions.php
   

   function add_additional_class_on_a($classes, $item, $args)
   {
   	if (isset($args->add_a_class)) {
   		$classes['class'] = $args->add_a_class;
   	}
   	return $classes;
   }
   
   add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

   2: Then use it like this
   

   <?php
   		// Show Menu here
   		wp_nav_menu(array(
   			'theme_location' => 'my-footer-menu',
   			'container_id'    => '',
   			'menu_class'      => 'footer-top list-unstyled',
   			'menu_id'         => '',
   			'add_a_class'     => 'box-link text-dark',
   		));
   ?>
7. Skip to note 14 content

   luboslives 2 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

   This is a good place to add the ARIA menuitem role:

   function wpdocs_add_menuitem_role_to_menu_anchors( $atts ) {
   	$atts['role'] = 'menuitem';
   
   	return $atts;
   }
   add_filter( 'nav_menu_link_attributes', 'wpdocs_add_menuitem_role_to_menu_anchors' );