Grow your CSS skills. Land your dream job.

Last updated on:

Remove LI Elements From Output of wp_nav_menu

You can remove or change the <ul> container that you get by default with wp_nav_menu (codex) through parameters, but you can't remove the <li> elements that wrap each menu item. This is how you can actually remove them:

$menuParameters = array(
  'container'       => false,
  'echo'            => false,
  'items_wrap'      => '%3$s',
  'depth'           => 0,
);

echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );

Comments

  1. Just out of curiosity, why would you want to do this? Aren’t list items pretty much the standard way of building a nav menu?

  2. Perfectly Reasonable! Even though HTML5 is awesome, I don’t like having to wrap another tag around navigation links. I’ve been using <nav> with just anchor tags in my navigation menus and reserving <ul> for actual unordered lists in the content. It makes more sense and is much cleaner, in my opinion.
    Thanks Chris.

  3. Phillip

    I’ve been looking for an output like the one seen on the comments, but I couldn’t make this snippet work for me. Please, someone, give me a hand with this. I promess helping spread the nice way to HTML menus on WP later on, okay?

    • make sure to put the theme location of your menu in the array.

      ‘theme_location’ => ‘primary’,

      The default wordpress menu is ‘primary’. If you are using a custom menu use its handle instead. Then wrap that whole snippet between the <nav></nav> tags. I hope that helps.

  4. Phillip

    I tried the code in some ways, but the best I could get was a menu at the beginning of my , while I want to use it to style the custom menus I’ve created. Is there anything special to the way this works?

  5. Pedro

    What about submenus? How should it look if it has a dropdown?

  6. Thank you, Chris!

    Excellent website, great tutorials here and on http://www.lynda.com. I also purchased your book “Digging into WordPress” I highly recommend it to everyone who wants to learn WordPress. Thank you for all your help!

  7. I’ve been wondering how to get rid of the list tags in a WordPress theme. I don’t know why it doesn’t just use the anchor tags by default, but thanks for this tutorial. It’ll make developing a WordPress theme so much easier.

  8. Rafique
    Permalink to comment#

    Hi Chris,
    You inspired me to learn WordPress. Thanks.

    I need to know how to put span tag to add extra words in wordpress dynamic menu item as you have done with your menu?

    And in this article you stripped all auto generated wp html tags for Menu. How you will style them if you have to design Dropdown Navigatoin?

    • Permalink to comment#

      I did it like this…
      add the span tag to link_before and after
      dont forget to add the span tag (next to the a tag) so it doesnt get stripped out.

      $menuParameters = array(
                          'container'       => false,
                          'echo'            => false,
                          'items_wrap'      => '%3$s',
                          'link_before'     => '<span>',
                          'link_after'      => '</span>',
                          'depth'           => 0,
                            );
      
      echo strip_tags(wp_nav_menu($menuParameters ), '<a><span>' );
      
  9. pagol
    Permalink to comment#

    it’s really nice and easy to use..

    may i know one more thing please.. how to just like this

    menu name
    menu name
    menu name
    menu name
    menu name

    i found already solution here http://stackoverflow.com/questions/5222140/remove-li-class-id-for-menu-items-and-pages-list?answertab=oldest#tab-top

    but problem is i have total 6 menu and two of them are drop down menu.. so i am seeing after add that code my drop down not working well and some css not work well so… but now i want some of menu which i will specify will be no class

  10. Super helpful! Thank you!

  11. Permalink to comment#

    This was the PERFECT solution to a challenge I’m facing at work! However, I now need to figure a way to keep the .current-menu-item in there so I can use it to display the active page.

    I’m attempting to use Foundation’s Tab system, with wp_nav_menu to create a fluid, easy-to-manage navigation bar…

    • ruuter
      Permalink to comment#

      Same question here

    • ruuter
      Permalink to comment#

      Found an easy solution. Use jQuery:

          $(function(){
              var path = location.href;
              if ( path )
              $('nav.main-menu a[href="' + path + '"]').attr('class', 'current');
          });
      
  12. Johan
    Permalink to comment#

    Works great! Thanks

  13. Permalink to comment#

    Thanks for the help on this one. But, I am wondering how we can get the classes applied to the A tags that were on the LI tags? I am trying to get current page but I would also like to have current parent page so not sure if wp_nav_menu can help anyway?

    • Permalink to comment#

      I actually saw that you add a class to the body and have classes on the nav items to handle this. Pretty sure you actually talked about this in your screencasts. Thanks

  14. proxo
    Permalink to comment#

    Php code

    <?php    
        $defaults = array(
        'theme_location'  => 'my-menu',
        'container'       => 'nav', 
        'container_class' => 'menu', 
        'echo'            => false,
        'fallback_cb'     => false,
        'items_wrap'      => '%3$s',
        'depth'           => 0
        );
        echo strip_tags(wp_nav_menu( $defaults ), '<nav><a>');
    ?>
    

    html result :

    <nav class="menu">
       <a></a>
       <a></a>
       <a></a>
    </nav>
    

    it’s better ;)

  15. This is handy. Thanks!

  16. Permalink to comment#

    Hi, can you tell me how to add extra element in wordpress menu, can we do it using javascript? like on my site I want one last element on my main menu with big dropdown box to show social buttons!

  17. is there any way just to remove the LI Class and ID?

    • Permalink to comment#

      Try this solution posted by Revelation Travis. Maybe it will help you?

      “Here is a fix that I’ve come up with. It removes all the id’s and classes from the wp_nav_menu, but allows you to come up with your own “approved” list of classes and/or id’s. It also changes the lengthy “current-menu-item” to “active”. If you prefer to keep the the default WordPress CSS styles, just delete that section of the code. For the sake of keeping this post minimal, here are the links to the pastebin with the code:
      http://pastebin.com/W16cxDfY – for your functions.php file
      http://pastebin.com/CGx4aprf – for your template, wherever the menu goes”

  18. Permalink to comment#

    I have few menus created in the appearance > menus and all I need is to have different .current-menu-item class in each of them, cause left menu is with triangle arrows in hyperlinks, but header menu and bottom menu are different. Chrome, Safari IE 10 and Firefox display menu correctly, but in IE 6, 7, * and the newest Opera, so in older versions also, menus are displayed in wrong way. Cause all menus inherit .current-menu-item class.

    Example css code which is inherit and loaded to header and bottom menus.

    css current-menu-item class for left sidebar menu:

    .menu-wynajem-akcesoriow-container li.current-menu-item a {
    margin-left:37px;
    color: #000000;
    font-weight:bold;
    background: transparent url(images/arrow.png) 0px 15px no-repeat;

    css current-menu-item class for header menu:

    div#header-content-menu li.current-menu-item a {
    color: #ffffff;
    background-color:#445d8a;
    height:52px;
    }

    css current-menu-item class for bottom menu:

    .columns-bottom .col-02 li.current_page_item a {
    color: #4d74bc;
    }

    All I know I need different current class or id for each menu, so every broser will display it correctly. Any ideas?

  19. abby normal
    Permalink to comment#

    thanks proxo – that code snippet was exactly what i needed :-)

  20. vaigundaraja
    Permalink to comment#

    Hi Friends,

    I have a problem to change the

    <

    ul> tag to

    <

    div> tag in wp_nav_menu.

    Please help me..

    my navigation is following format.

    Homepage
    About us

    can anyone help me…

  21. Mark
    Permalink to comment#

    Anyway you can preserve the output of classes that are added in WP admin?

    <a class="" href="">
  22. Shrinath
    Permalink to comment#

    Hello there,

    I’m creating wordpress menu from html. my nav menu looks like below

    <ul>
    <li class=”current”><a href=”index.html” class=”m1″>Home Page</a></li>
    <li><a href=”about-us.html” class=”m2″>About Us</a></li>
    <li><a href=”articles.html” class=”m3″>Our Articles</a></li>
    </ul>

    So anyone can suggest me how can I do this in wordpress menu

    Presently I’ve done it like as under

    <?php wp_nav_menu( array( ‘theme_location’ = > ‘primary’,’container_id’ = > ‘nav’,) );? >

    But it didn’t work.:(

    • Hi great solution but couldn’t get it to work under WordPress 3.6. :-(

    • This is my solution that I managed to get working with WordPress 3.6.

      $options =  array(
          'echo'              => false,
          'theme_location'    => 'footer_menu',
          'items_wrap'        => '%3$s', 
          'menu_class'        => false, 
          'menu_id'           => false,
          'container'         => false,
          'container_class'   => false,
          'container_id'      => false,
          'before'            => ' | ',
          'after'             => false
      );
      
      $menu = wp_nav_menu($options);
      
      echo strip_tags($menu, '<a>');
      
  23. Thanks for this. Worked in 3.6 for me.

  24. Anonymous
    Permalink to comment#
    <ul>
       <li class=”current”>
         <a href=”index.html” class=”m1″>Home Page</a>
         <a href=”about-us.html” class=”m2″>About Us</a>
         <a href=”articles.html” class=”m3″>Our Articles</a>
      </li>
    </ul>
    

    Work for me.

  25. Permalink to comment#

    I came up with a way using str_replace to maintain all the classes, including those for current menu items, on the links. It’s pretty straightforward:

    <?php 
    $cleanermenu = wp_nav_menu( array( 
        'theme_location' => 'primary', 
        'container' => false,
        'items_wrap' => '<nav id="%1$s" class="%2$s">%3$s</nav>', 
        'echo' => false,
    ) );
    
    $find = array('><a','li');
    $replace = array('','a')
    echo str_replace( $find, $replace, $cleanermenu );
    
    ?>
    

    I wrote a blog post about it, if you’re looking for a little more info/ rational.

  26. Cris Caducoy
    Permalink to comment#

    Yes this is very interesting fact as when you are building footer navigation as you want those custom menu built on your custom menu options on dashboard, you want those small links to be added dynamically and is always centered. It was easier for an anchor to be set centered than those inside li’s.

  27. Permalink to comment#

    Wonderful! I can always count on this site for the goods.
    Stuck on one last thing…
    Does anyone know how to add a class to the a tag (not dynamically)
    I need the same class on each a tag in the menu.

    • Permalink to comment#

      I was able to get this done, using a simpler form of ruuters jquery solution above

      <script>
      jQuery( "#menu a" ).addClass( "my-class" );
      </script>
      
    • Stubby
      Permalink to comment#

      If you add this to your functions file:

      function mark_active_menu_item( $subject, $indicator ) {
        $menu = explode( "current-menu-item", $subject );
        return $menu[0] . preg_replace( '/href/', 'class="' . $indicator . '" href', $menu[1], 1 );
      }
      

      And then wrap your wp_nav_menu thusly:

      echo strip_tags(
                 mark_active_menu_item(
                   wp_nav_menu( 
                      $menu_arguments  // Array that Chris provided
                  ),
                  "active"        // I chose to use "active" for my active menu item.
                ),
                "<a>"
              );
      

      You can totally do the same thing with php with the added bonus that it won’t break if someone turns off javascript.

  28. Hi! Can somebody please, please tell me where to put this code, because it’s not mentioned anywere. Is it really that obvious, and I’m the only one stupid that can’t manage to find it out?

  29. LebCit
    Permalink to comment#

    HELLO Chris,

    First of all, i must say A ZILLION THANKS :) !!!

    I was goggling for the solution and the first answer was yours !

    I had a menu markup without the div / ul / li of wp_nav_menu just a nav / a – a – a – … / nav

    Removing the div and the ul was easy of course, the CODEX !

    But when it came to the li HOHOHO, it took me a couple of hour before googgling LOL

    So again THANKS A ZILLION TIME for sharing your ninja code experience :) !!!

  30. Engineer Saddam
    Permalink to comment#

    Trisha

    thanks you solved my problem

    thanks alot

  31. Permalink to comment#

    Anyone know how to grab a sub-menu (unordered list in a li) to wrap that bad boy in a div?

    • Replying too late for you Dan I guess, but might help someone else:

      You should be able to use the start_lvl and end_lvl functions of the Walker_Nav_Menu class. For example if you add this to functions.php:

      class dans_walker extends Walker_Nav_Menu {
       function start_lvl( &$output, $depth = 0, $args = array() ) {
        $output .= "<div class='whatever you want'><ul>";
       }
       function end_lvl( &$output, $depth = 0) {
        $output .= "</ul></div>";
       }
      }
      

      and call your menu like this in your theme:

      <?php
       $defaults = array(
        'container'   => false,
        'menu_class'  => false,
        'walker'      => new dans_walker()
       );
       wp_nav_menu( $defaults );
      ?>
      

      …something like that, I think :)

  32. Rene

    Thank you so so much for this little piece of code!!

  33. Ben Hutchings
    Permalink to comment#

    I’ve just been doing this for a site and found it tricky to remove the list elements but retain all the useful ancestry classes like ‘current-menu-item’ etc. The only way I was able to do it was with a walker class to directly modify the wp_nav_menu output.

    Here’s a link to my method (if links are frowned upon, tell me and I’ll paste it all here): http://myquickfix.co.uk/2014/08/remove-and-tags-from-wordpress-menus-while-retaining-all-the-classes/

  34. Permalink to comment#

    http://stackoverflow.com/questions/25680791/trying-to-fetch-wp-nav-menu-dynamically-in-wordpress?noredirect=1#comment40135231_25680791

    on this link i ask a question but no proper result, i have share my menus image and HTML, i am stuck please help me if you have any solution.

    Thanks in Advance

  35. Guens
    Permalink to comment#

    This tutorials helps me so much.

    Big thanks

  36. Jerry Liu
    Permalink to comment#

    Awesome tricks! I’m working on such an issue, and CSS-Tricks never let me down! Thank you Chris!

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".