I'm building a mobile navigation menu. I wan't the menu to work like this:

enter image description here

In this image you see a mobile nav with multiple depth levels.

This is how I wan't the code structure to look like:

    <li class="menu-item-has-children">
        <div class="toggle-button"></div>
        <a href=""></a>
        <ul class="submenu">
            <li class="menu-item-has-children">
                <div class="toggle-button"></div>
                <a href=""></a>
                <ul class="submenu"></ul>

You can see a menu item "Products" with children that are hidden.

Below you see "Industries". Here the children are shown when the toggle button to the right is clicked. The children of the next submenu level can also be toggled and so on.

I'm outputting all menu items with 'depth' => '0', and now I wan't submenus to be expandable.

To do this I need to add a toggle HTML element (see the code structure above) for which I can use jQuery to toggle an "active" class on the parent element, which then reveals the children.

My question

How can I add this toggle element inside all <li> elements, that have children, for all depth levels?

I think I need to filter wp_nav_menu or add a custom walker function, but I'm not sure how.

  • A custom walker is what you need. Try some of the tutorials around the web verbatim, then work on tweaking it slowly toward what you need. Then if you have a more specific question or portion where you're stuck, post it here and you may find more assistance. :)
    – WebElaine
    Oct 13, 2017 at 18:47
  • Thanks for your reply. After tinkering a bit i managed to come up with a solution. See my answer below.
    – Skovsgaard
    Oct 16, 2017 at 12:49

1 Answer 1


I managed to solve this:

Create the function

So I created a new custom walker function in functions.php and copied all the code of the core wp nav walker function (wp-includes/class-walker-nav-menu.php).

Check for a menu item that has children

I then added this array_search in public function start_el to check if the parent element has the class "menu-item-has-children":

$has_children = array_search ( 'menu-item-has-children' , $classes );

Output the toggle button

I then output the collapse element at the end of the start_el function if $has_children is true:

if($has_children != false) :
    $item_output .= '<div class="toggle-button"></div>';

Making it all work

I then added jQuery to toggle a class on the parent element of the toggle button.

jQuery(".toggle-button").click( function (){

This works perfectly, but is there a better way to check if the menu item has children? Searching for a class name just doesn't feel like the best solution.

  • I am trying to get this to work for me, but having an issue. Any chance you could provide your function code and final wp_nav_menu code? Thanks
    – Ari Simon
    Feb 21, 2022 at 23:45
  • @AriSimon don't post comments/replies as the solution to the question, I moved your answer here as a comment but I do not know if this was the correct place or not. Don't do it again, gain the reputation to comment instead or you run the risk of the site thinking you're a spambot. You'll also want to share what these issues you're having are if you want help, but not here
    – Tom J Nowell
    Feb 22, 2022 at 0:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.