WordPress Mobile Nav: Create a Select Dropdown From A Custom Menu

Looking to add a jumpnav to your WordPress template so that you can hide the full navigation at smaller sizes? Here is a snippet for your template to get you started. Simply add a little javascript and CSS as your project requires.

This code will indent child items as well as put brackets around for-hierarchy items (ones that have no URL to link to).

Replace the menu slug “main-menu” as needed.

$menu_items 	= wp_get_nav_menu_items('main-menu');
$html			= '<select>';
$has_children 	= array();
$has_parent		= array();

foreach($menu_items as $row) {
	$title 	= $row->title;
	$url 	= $row->url;
	$parent	= $row->menu_item_parent; // no parent will be 0
	$pad 	= '';
	
	if($parent != '0') {
		$pad .= ' - ';
		
		// Add this id to the child items list
		$has_parent[] = $row->ID;
		
		// Add the parent to the parents array
		if(!in_array($parent, $has_children)) $has_children[] = $parent;
		
		// If our parent is also a child, we need to indent further
		if(in_array($parent, $has_parent)) $pad .= $pad;
	}
	
	// Bracket empty (placeholder) list items
	if(empty($url)) $html .= '<option>['.$pad.$title.']</option>';
	else $html .= '<option value="'.$url.'">'.$pad.$title.'</option>';
}

$html .= '</select>';

echo $html;

Sprise Media in Scottsdale eats WordPress websites for breakfast and is available to hire for your next project. From full service web design and development to custom plugins and themes, we’ve got you covered.

Last updated on May 9th, 2017