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 Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href=""> <abbr> <acronym> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Send a Message