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>

4 Answers
4

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.

Leave a Reply

Your email address will not be published. Required fields are marked *