title: Wordpress Menu Description in Dropdown
body: <p>I'm looking to display the Menu Description in the Dropdown for my menu.</p>
  
  <p>I'm using a Nav Menu Walker with a dropdown that supports Bootstrap for my current menu and I have an example of a Nav Menu Walker with just the description.</p>
  
  <p>How would I go about putting the Description into the dropdown links? (Link - description)</p>
  
  <p>Here is the walker with the description:
    
  
  <pre><code>         $class_names = $value = '';
  
           $classes = empty( $item-&gt;classes ) ? array() : (array) $item-&gt;classes;
  
           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';
  
           $output .= $indent . '&lt;li id="menu-item-'. $item-&gt;ID . '"' . $value . $class_names .'&gt;';
  
           $attributes  = ! empty( $item-&gt;attr_title ) ? ' title="'  . esc_attr( $item-&gt;attr_title ) .'"' : '';
           $attributes .= ! empty( $item-&gt;target )     ? ' target="' . esc_attr( $item-&gt;target     ) .'"' : '';
           $attributes .= ! empty( $item-&gt;xfn )        ? ' rel="'    . esc_attr( $item-&gt;xfn        ) .'"' : '';
           $attributes .= ! empty( $item-&gt;url )        ? ' href="'   . esc_attr( $item-&gt;url        ) .'"' : '';
  
           $prepend = '&lt;strong&gt;';
           $append = '&lt;/strong&gt;';
           $description  = ! empty( $item-&gt;description ) ? '&lt;span&gt;'.esc_attr( $item-&gt;description ).'&lt;/span&gt;' : '';
  
           if($depth != 0)
           {
                  $description = $append = $prepend = "";
           }
  
            $item_output = $args-&gt;before;
            $item_output .= '&lt;a'. $attributes .'&gt;';
            $item_output .= $args-&gt;link_before .$prepend.apply_filters( 'the_title', $item-&gt;title, $item-&gt;ID ).$append;
            $item_output .= $description.$args-&gt;link_after;
            $item_output .= '&lt;/a&gt;';
            $item_output .= $args-&gt;after;
  
            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }
  </code></pre>
  
  <p>}</p>
  
  <p>Here is my current walker:</p>
  
  <pre><code>class wp_bootstrap_navwalker extends Walker_Nav_Menu {
  
          /* Start of the &lt;ul&gt;
           *
           * Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu".
           *                 So basically add one to what you'd expect it to be
           */
          function start_lvl(&amp;$output, $depth) {
              $tabs = str_repeat("\t", $depth);
              // If we are about to start the first submenu, we need to give it a dropdown-menu class
              if ($depth == 0 || $depth == 1) { //really, level-1 or level-2, because $depth is misleading here (see note above)
                  $output .= "\n{$tabs}&lt;ul class=\"dropdown-menu\"&gt;\n";
              } else {
                  $output .= "\n{$tabs}&lt;ul&gt;\n";
              }
  
              return;
          }
  
          /* End of the &lt;ul&gt;
           *
           * Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu".
           *                 So basically add one to what you'd expect it to be
           */
          function end_lvl(&amp;$output, $depth) {
              if ($depth == 0) { // This is actually the end of the level-1 submenu ($depth is misleading here too!)
  
                  // we don't have anything special for Bootstrap, so we'll just leave an HTML comment for now
                  $output .= '&lt;!--.dropdown--&gt;';
              }
              $tabs = str_repeat("\t", $depth);
              $output .= "\n{$tabs}&lt;/ul&gt;\n";
  
              return;
          }
  
          /* Output the &lt;li&gt; and the containing &lt;a&gt;
           * Note: $depth is "correct" at this level
           */
          function start_el(&amp;$output, $item, $depth, $args) {
              global $wp_query;
              $indent      = ($depth) ? str_repeat("\t", $depth) : '';
              $class_names = $value = '';
              $classes     = empty($item-&gt;classes) ? array() : (array)$item-&gt;classes;
  
              /* If this item has a dropdown menu, add the 'dropdown' class for Bootstrap */
              if ($item-&gt;hasChildren) {
                  $classes[] = 'dropdown';
                  // level-1 menus also need the 'dropdown-submenu' class
                  if ($depth == 1) {
                      $classes[] = 'dropdown-submenu';
                  }
              }
  
              $prepend     = '&lt;strong&gt;';
              $append      = '&lt;/strong&gt;';
              $description = !empty($item-&gt;description) ? '&lt;span&gt;' . esc_attr($item-&gt;description) . '&lt;/span&gt;' : '';
  
              if ($depth != 0) {
                  $description = $append = $prepend = "";
              }
  
              /* This is the stock Wordpress code that builds the &lt;li&gt; with all of its attributes */
              $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
              $class_names = ' class="' . esc_attr($class_names) . '"';
              $output .= $indent . '&lt;li id="menu-item-' . $item-&gt;ID . '"' . $value . $class_names . '&gt;';
              $attributes = !empty($item-&gt;attr_title) ? ' title="' . esc_attr($item-&gt;attr_title) . '"' : '';
              $attributes .= !empty($item-&gt;target) ? ' target="' . esc_attr($item-&gt;target) . '"' : '';
              $attributes .= !empty($item-&gt;xfn) ? ' rel="' . esc_attr($item-&gt;xfn) . '"' : '';
              $attributes .= !empty($item-&gt;url) ? ' href="' . esc_attr($item-&gt;url) . '"' : '';
              $item_output = $args-&gt;before;
  
              /* If this item has a dropdown menu, make clicking on this link toggle it */
              if ($item-&gt;hasChildren &amp;&amp; $depth == 0) {
                  $item_output .= '&lt;a' . $attributes . ' class="dropdown-toggle" data-toggle="dropdown"&gt;';
              } else {
                  $item_output .= '&lt;a' . $attributes . '&gt;';
              }
  
              $item_output .= $args-&gt;link_before . apply_filters('the_title', $item-&gt;title, $item-&gt;ID) . $args-&gt;link_after;
  
              /* Output the actual caret for the user to click on to toggle the menu */
              if ($item-&gt;hasChildren &amp;&amp; $depth == 0) {
                  $item_output .= '&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;';
              } else {
                  $item_output .= '&lt;/a&gt;';
              }
  
              $item_output .= $args-&gt;after;
              $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
  
              return;
          }
  
          /* Close the &lt;li&gt;
           * Note: the &lt;a&gt; is already closed
           * Note 2: $depth is "correct" at this level
           */
          function end_el(&amp;$output, $item, $depth, $args) {
              $output .= '&lt;/li&gt;';
  
              return;
          }
  
          /* Add a 'hasChildren' property to the item
           * Code from: http://wordpress.org/support/topic/how-do-i-know-if-a-menu-item-has-children-or-is-a-leaf#post-3139633
           */
          function display_element($element, &amp;$children_elements, $max_depth, $depth = 0, $args, &amp;$output) {
              // check whether this item has children, and set $item-&gt;hasChildren accordingly
              $element-&gt;hasChildren = isset($children_elements[$element-&gt;ID]) &amp;&amp; !empty($children_elements[$element-&gt;ID]);
  
              // continue with normal behavior
              return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
          }
      }
  </code></pre>