Add arrows to menu items


The code below adds arrow icons to the menu items that have sub-menus. As shown in the screenshot above, top level menu items will have down arrows, and submenus will use right arrows. Not included in this code is the CSS for the icon font itself, but you can create your own icon font at IcoMoon or Fontastic.

* Add arrows to menu items
* @author Bill Erickson
* @link
* @param string $item_output, HTML output for the menu item
* @param object $item, menu item object
* @param int $depth, depth in menu structure
* @param object $args, arguments passed to wp_nav_menu()
* @return string $item_output
function be_arrows_in_menus( $item_output, $item, $depth, $args ) {
if( in_array( 'menu-item-has-children', $item->classes ) ) {
$arrow = 0 == $depth ? '<i class="icon-angle-down"></i>' : '<i class="icon-angle-right"></i>';
$item_output = str_replace( '</a>', $arrow . '</a>', $item_output );
return $item_output;
add_filter( 'walker_nav_menu_start_el', 'be_arrows_in_menus', 10, 4 );
view raw functions.php hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk