Add Chevron Icon After Menu Element

Posted on Apr 28, 2025

by Jimmy


Code snippet that will add a chevron icon after menu items that have a submenu.

functions.php

PHP
        
            /**
 * Add chevron icon to link items containing a sub menu
 */
add_filter( 'walker_nav_menu_start_el', 'tm_add_chevron', 10, 4);
function tm_add_chevron( $output, $item, $depth, $args ){

    //Only add class to 'top level' items on the 'primary' menu.
    if('main-menu' == $args->theme_location && $depth === 0 ){
        if (in_array("menu-item-has-children", $item->classes)) {
            $output .='<span class="chevron-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.37 16.1"><g data-name="Layer 2"><path fill="#000" d="M23.23 0L12.98 9.77 3.19.12 0 3.36 12.93 16.1 26.37 3.29 23.23 0z" data-name="Layer 1"/></g></svg></span>';
        }
    }
    return $output;
}        
    

Change main-menu to the name of the menu you are targeting.

Change the fill to your desired colour. It can also be a custom property, for example: fill="var(--green)"


Back to Snippets