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
}
}

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk