How to show navigation pages in dropdown field

How To
1

Hi,

I have tried to make a new navigation with pages. Its shows the pages in a column, possible to make that in a dropdown field? I prefer this option.

2

So what should happen after an item/option of the dropdown menu is selected?
Do you want to switch to the selected page/post/archive? For this you would need additional JavaScript …

3

Hi Flex,

Yes I want to switch it to the page you select. It must keep its slug.

How can I get this additional Javascript?

4

Hi & happy new year!

You can add this code with the “Code” element:

<select id="drop-down-menu">
  <option value="">Choose Page</option>
  <?php
    $navMenu =  wp_get_nav_menu_items( int|string|WP_Term $menu );
    foreach( $navMenu as $navItem ) {
      echo '<option value="' . $navItem->url . '">' . $navItem->title . '</option>';
    }
  ?>
</select>

<script>
  var urlmenu = document.getElementById( 'drop-down-menu' );
  urlmenu.onchange = function() {
    if( this.options[ this.selectedIndex ].value != '' ) {
      window.open( this.options[ this.selectedIndex ].value, '_self');
    }
  };
</script>

Change int|string|WP_Term $menu to your menu slug which is the name of the menu in lowercase and spaces are “-”: e.g. 'test-menu'. When you create a new menu or you have more than one and select another menu, you can see menu=X (where X is the ID) in the address bar. So you could use wp_get_nav_menu_items( X ) (more about wp_get_nav_menu_items in Wordpress Code Reference …)
id="drop-down-menu" and document.getElementById( 'drop-down-menu' ) must have the same.

Make sure your code executable:
image

Run the code once:
image

And test the page with the drop down menu (preferred in a browser where you aren’t logged in or at a normal view but not the Bricks’ preview)

You can see my result here:

Is that what you were looking for?

2 Likes