wordpress nav menu using twitter bootstrap

Question

I'm using twitter bootstrap in my theme. I'm trying to use bootstrap menu in my theme. But it use custom attributes like data-toggle.

Here is the full code.

<ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>

Can anyone help me to optimize this code for wp_nav_menu() ?

Update:

This is what i tried so far.

1) Custom submenu class

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
  }
}

2) wp_nav_menu

<?php wp_nav_menu( array( 'items_wrap' => '<ul class="nav">%3$s</ul>','walker' => new My_Walker_Nav_Menu() ) ); ?>

Can you help me to add that "dropdown" class and this link

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

---

Answer 1

For a copy paste solution check this custom Walker out: http://goodandorgreat.wordpress.com/2012/01/12/update-2-using-twitter-bootstrap-dropdown-menus-with-wordpress/

It's missing one or two things like data-toggle="dropdown" and <b class="caret"></b>.

It should be quite easy to figure that out, but here's my modified version: https://gist.github.com/1817371

Hope that helps.

Answer 2

I used a different approach than a custom walker. I used a function to add the class "dropdown" to any parent nav items which contain sub menu items. Since WordPress outputs the class "sub-menu" by default, I use jQuery to add the class "dropdown-menu" to any thing that has a class of "sub-menu". I then use jQuery to append the <b class="caret"></b> element.

I have written this up as a complete tutorial about how to implement the Bootstrap dropdown in a WordPress nav menu here: http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/

Answer 3

See this answer for details: Look for menu_item_parent and set class="dropdown-toggle" conditionally.

More similar questions.

Answer 4

Try WP Bootstrap Menu if your not looking for something complicated.

You have to replace the native wp_nav_menu() with a custom function from the plugin in your theme to get it working. Be aware the plugin function is not compatible with other plugins, it doesn’t offer the same filters as the WordPress walker.