Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm using the following inside the wp_nav_menu function to create a select dropdown menu where each menu item is an option in the select dropdown...

'items_wrap' => '<select>%3$s</select>'
'before'     => '<option value="">'
'after'      => '</option>'

How do I add the link value in the 'before' declaration? Is there a better way to go about this? I know about wp_dropdown_pages, but that doesn't work because I want users to be able to control the menu from the "Menus" page.

share|improve this question
add comment

2 Answers

up vote 16 down vote accepted

You can't do this with wp_nav_menu, because it outputs list items, and you'll generate invalid markup with your code.

Try using wp_get_nav_menu_items() instead.


A quick solution for a drop down menu with a custom walker:

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{

    // don't output children opening tag (`<ul>`)
    public function start_lvl(&$output, $depth){}

    // don't output children closing tag    
    public function end_lvl(&$output, $depth){}

    public function start_el(&$output, $item, $depth, $args){

      // add spacing to the title based on the current depth
      $item->title = str_repeat("&nbsp;", $depth * 4) . $item->title;

      // call the prototype and replace the <li> tag
      // from the generated markup...
      parent::start_el(&$output, $item, $depth, $args);
      $output = str_replace('<li', '<option', $output);
    }

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

In your templates use it like this:

wp_nav_menu(array(
  'theme_location' => 'primary', // your theme location here
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));
share|improve this answer
1  
Actually, when using the "items_wrap" part, that removes the list items, so the markup is ok. I'll check out the link though. Thanks! –  Chris Molitor Sep 1 '11 at 21:01
    
yes, but that doesn't handle the nested <UL>s :) –  onetrickpony Sep 1 '11 at 21:02
    
It actually does :-) –  Chris Molitor Sep 1 '11 at 21:09
1  
According to the source it doesn't, unless you're using a custom walker... –  onetrickpony Sep 1 '11 at 21:21
    
That link works for what I'm trying to do. Thanks! –  Chris Molitor Sep 1 '11 at 21:21
show 7 more comments

Dropdown Menus plugin does answer the question: wp_nav_menu can't be used to create select menu dropdown, whereas plugin provides nifty dropdown_menu() function that does the job admirably.

share|improve this answer
add comment

protected by Community Dec 20 '12 at 2:28

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.