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 a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

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

Let's Talk