How to add dropdown menu arrows

Code to add drop down arrows to your WordPress MenuDropdown menu arrows let a user knows there is more content available. They can provide an important visual queue so site users understand how to best navigate through a website.

A former student asked how to add these indicators to her Responsive Child theme.  Here is the code that can be added to a child theme.

Before you make any code edits backup! Use at your own risk.

Step 1: Create a functions.php file with this code

dropdown-indicatorIf you don’t already have a functions.php file in your child theme you’ll need to create one with the opening php tag. If you already have a functions.php file, open it and copy the code below omitting the opening tag.

This isn’t my original code I found it  here » on github.

<?php
// add arrows to menu parent 
function oenology_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', 'oenology_add_menu_parent_class' );

Step 2: Add this to the style.css file

This will put add and style the arrows. Please adjust the hex colour code to style for your site.

.menu li.has-children > a:after {
 color: #fff;
 content: ' ▼';
 font-size: 10px;
 vertical-align: 1px;
}
.menu li li.has-children > a:after {
 color: #222;
 content: ' ►';
 font-size: 10px;
 vertical-align: 1px;
}

Step 3: Upload to your Child Theme

Update the functions.php file and the style.css file for your Child Theme folder by FTP

That should do the trick!  Why not add a comment below to showcase your menu with a dropdown menu arrow?

11 thoughts on “How to add dropdown menu arrows


    1. Thanks for letting us know, glad that you found this helpful.


  1. Can I do this within the program without using code as I don’t understand that stuff? I thought there was an option in Appearance – menu in word press.


  2. Hi, thank so much for this article!
    It worked great for me! The only difference is that I used custom icons as pictures through your code 🙂

    I wanted to ask though. is it possible to make it so, if a person clicks on the dropdown the icon will change? For example from down arrow to up arrow?

Leave a Reply

Your email address will not be published. Required fields are marked *

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