How To Add Drop-down Menu Indicator In WordPress

A small arrow next to menu items that have a submenu tells visitors there’s more under that link. This two-part snippet adds one to a WordPress menu: PHP gives every parent item a class, and CSS draws the arrow.

Step 1: add a class to parent menu items

Add this code to your child theme’s functions.php file.

//MENU DROPDOWN INDICATOR
// add arrows to menu parent 
function theme_name_add_menu_parent_class( $items ) {
 
 $parents = array();
 foreach ( $items as $item ) {
 if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
 $parents[] = $item->menu_item_parent;
 }
 }
 
 foreach ( $items as $item ) {
 if ( in_array( $item->ID, $parents ) ) {
 $item->classes[] = 'has-children';
 }
 }
 
 return $items;
}
add_filter( 'wp_nav_menu_objects', 'theme_name_add_menu_parent_class' );

• The wp_nav_menu_objects filter runs on the list of menu items before WordPress prints a menu with wp_nav_menu().
• The first loop collects the ID of every item that is set as a parent (menu_item_parent). The second loop adds the class has-children to those items.

Step 2: style the arrow with CSS

Add the CSS to your theme’s stylesheet or to the Additional CSS panel in the Customizer.

/*
MENU DROPDOWN INDICATOR
*/
.menu li.has-children > a:after {
 color: #fff;
 content: '  ▼';
 font-size: 10px;
 vertical-align: 1px;
}

• .menu is the default class WordPress gives a menu’s list. If your theme uses a different menu_class, change the selector to match.
• The arrow is white (#fff), so change the color if your menu has a light background. Adjust font-size and vertical-align to line it up with the link text.
• If the arrow shows up as garbled characters, save the CSS file as UTF-8 or use the CSS escape \25BC in place of the character.
• WordPress also adds its own menu-item-has-children class to parent items, so you can target that class in the CSS if you’d rather skip the PHP step.

Related articles

• highlighting the current page in a WordPress menu: another class WordPress adds to menu items
• keeping submenus open on diagonal mouse moves: the next usability fix for dropdowns
• making parent menu items tappable on mobile: dropdown behavior on touch screens