wp_nav_menu() showing list in a different Position?

Question

While trying to add menu list as the following

<li>
 <div class="dropdown-menu" aria-labelledby="navbarDropdown">

      <?php 
           wp_nav_menu(array(
               'theme_location' => 'header_menu_location',
               'echo' => false,
               'items_wrap' => '%3$s'
            ));

      ?>
                    
</div>

This function should show a list of items within div element but what I get is that list is being shown right after the outer li element. What's even weird about it is that when I do not use attribute 'items_wrap' the output is showing properly inside of the div container, only when I add to the args array the output list appears outside of its div container. What am I doing wrong?

Answer 1

It's not working for two reasons.

1. You have echo set to false. This means it won't output anything unless you echo it manually.
2. The resulting HTML structure is invalid.

You have items_wrap set it %3$s. This means that the individual menu items, which are <li> tags, will be output without a wrapper. That would make the final structure this:

<ul>
  <li>
    <div class="dropdown-menu">
      <li></li>
      <li></li>
      <li></li>
    </div>
  </li>
</ul>

That's not valid HTML. The <li> tags need to be in an <ol> or <ul>, not a <div>. The simplest solution is to change the div to a <ul>:

<li>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

      <?php 
           wp_nav_menu(array(
               'theme_location' => 'header_menu_location',
               'echo' => false,
               'items_wrap' => '%3$s'
            ));

      ?>
                    
</ul>