How can i use wp_nav_menu to create a select menu dropdown instead of default ul li menu items?

First call the wp_nav_menu function like below where you want to show your menu items.

wp_nav_menu(array(
	'theme_location' => 'customerservice',
	'container'  => false,
	'walker'         => new Walker_DropDown(),
	'items_wrap'     => '<select>%3$s</select>',
));

Then add this nav walker function to your theme functions.php

class Walker_DropDown extends Walker_Nav_Menu{
	function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {		
        $item_output = ''; 
        $item->title = str_repeat("&amp;nbsp;", $depth * 4) . $item->title; 
        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' value="'   . esc_attr( $item->url        ) .'"' : ''; 
        $item_output .= '<option'. $attributes .'>';
        $item_output .= apply_filters( 'the_title_attribute', $item->title ); 
        $output .= $item_output;
    }	
    function end_el(&$output, $item, $depth = 0, $args = NULL){
		$output .= "</option>\n";
    }
}

If you want to redirect when you select the items from dropdown, then you need to add this jquery code on your js file like below:

$('select').change(function() { // add a container class before select like( $('.mainav select') ) to specify particular select field 
		window.location = $(this).val();
	});

Leave a Reply

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