How to add dropdown arrow for menu items having sub menu items in WordPress

WordPress has it’s own way of managing menu as well as loading this on site end.

/**
* Attach icon class to the menu title
*
* @param $sorted_menu_items
* @param $args
* @return mixed
*/
function wti_add_arrow_to_parent_menu_item($sorted_menu_items, $args) {
foreach ($sorted_menu_items as $menu_item) {
if (array_search('menu-item-has-children', $menu_item->classes) != FALSE) {
$menu_item->title = $menu_item->title . '<i class="icofont-simple-down"></i>';
}
}

return $sorted_menu_items;
}
// Dropdown arrows to parent menu items
add_filter( 'wp_nav_menu_objects', 'wti_add_arrow_to_parent_menu_item', 10, 2);

As you can see, we have attached html tag with icofont to the menu title. If you are using some other font icons like fontawesome, you need to change the class. You also need to apply proper css code to match accordingly.

.icofont-simple-down:before {
content: "\eab2";
}

Leave a Reply

Your email address will not be published. Required fields are marked *