WordPress Menu as Select Dropdown

WordPress menus display as unordered lists by default. You might want to display them as a select menu though. Below is an example of creating a menu ‘walker’ that will render it as a select menu. When you are displaying your menu using wp_nav_menu(), include 'walker' => new Walker_Nav_Menu_Dropdown() to tell WordPress to use this type of formatting rather than the default.

	<?php

	// Nav Menu Dropdown Class
	include_once( CHILD_DIR . '/lib/classes/nav-menu-dropdown.php' );

	/**
	* Mobile Menu
	*
	*/
	function be_mobile_menu() {
	wp_nav_menu( array(
	'theme_location' => 'mobile',
	'walker' => new Walker_Nav_Menu_Dropdown(),
	'items_wrap' => '<div class="mobile-menu"><form><select onchange="if (this.value) window.location.href=this.value">%3$s</select></form></div>',
	) );
	}
	add_action( 'genesis_before_header', 'be_mobile_menu' );

view raw functions.php hosted with ❤ by GitHub

	<?php
	/**
	* Nav Menu Dropdown
	*
	* @package BE_Genesis_Child
	* @since 1.0.0
	* @link https://github.com/billerickson/BE-Genesis-Child
	* @author Bill Erickson <[email protected]>
	* @copyright Copyright (c) 2011, Bill Erickson
	* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
	*
	*/

	class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {
	function start_lvl(&$output, $depth){
	$indent = str_repeat("\t", $depth); // don't output children opening tag (`<ul>`)
	}

	function end_lvl(&$output, $depth){
	$indent = str_repeat("\t", $depth); // don't output children closing tag
	}

	/**
	* Start the element output.
	*
	* @param string $output Passed by reference. Used to append additional content.
	* @param object $item Menu item data object.
	* @param int $depth Depth of menu item. May be used for padding.
	* @param array $args Additional strings.
	* @return void
	*/
	function start_el(&$output, $item, $depth, $args) {
	$url = '#' !== $item->url ? $item->url : '';
	$output .= '<option value="' . $url . '">' . $item->title;
	}

	function end_el(&$output, $item, $depth){
	$output .= "</option>\n"; // replace closing </li> with the option tag
	}
	}

view raw nav-menu-dropdown.php hosted with ❤ by GitHub

Bill Erickson

Ready to upgrade your website?

A starter theme for building Hybrid WordPress Themes

Building a header block in WordPress

Custom recipe templates for WP Recipe Maker

Custom importer for WP Recipe Maker