Nice Navigation – make your WordPress menus look way cooler

Nice Navigation is a menu plugin for WordPress that makes your page list expandable/collapsible. Very useful for menus with many pages.

Screenshots

So what does it look like? Something like this:

Nice Navigation Features

  • Simple and nice collapsible/expandable menu with your pages
  • Better overview over your pages
  • Visitors can focus on one section on your website at the time
  • Instantly navigate to sub-pages
  • Uses jQuery for a nice animation effect (hence the name)
  • Users with JavaScript disabled will se a regular menu
  • No downsides for SEO/Google, all pages still browsable by search engines
  • All arguments/options available for wp_list_pages is available for this plugin/widget.
  • Styles can be overridden with your own custom CSS
  • Looks cool! 😉

81 thoughts on “Nice Navigation – make your WordPress menus look way cooler

  1. Nice Navigation creates good looking expand/collapse-menus for WordPress blogs/sites | eskapism.se

      • Some thoughts and observations:

        – Arrows seem to behave a little odd. Have 3 parents with couple of childs. First arrow is always down, even if I comment out the “open up onstart” line. Next 2 arrows goes down and up again upon first 2 clicks but then they are stuck. Same behaviour after page reload. This is on latest Chrome for Win. On Firefox (latest) you can collapse the first parent but then the whole tree is stuck. All on WP3, Twenty Ten and no other plugins activated.

        – Replacing “click” with “mousedown” makes the experience more responsive. I’m no jquery guy so I can’t forsee other complications.

        – Would be very nice with an option to make parent just a placeholder and be clickable (whole text) to expand the tree.

        Again, many thanks for your work! 🙂
        Bo

  2. wp_list_pages: customize the look of pages that have children | eskapism.se

  3. Wordpress als CMS – nützliche Seiten-Plugins | Contrast21 Blog

  4. Hi Pär

    I just want to say Thank YOU for this wonderful plugin.

    It’s just SUPER GREAT !!!
    It’s a must for CMS wordpress.

    Can not say thank you enough for this.

    Please keep it up !

    • There are no way to add your own CSS through the widget, but you can modify the styles by adding CSS to any other CSS-file that is loaded.

      Something like this changes for example the padding of the links:

      .nice_navigation li a {
      padding: 20px !important;
      display: block;
      }

      Please note the “!important”-part that sometimes is necessary to override the “built in” styles.

    • I’m not sure I understand your problem here. Can you give me a screenshot of the site before and then after so I can understand what’s wrong?
      I tried the two links above, but couldn’t figure out the difference.. :/

  5. This is a great plugin!

    Is there anyway to integrate a wp 3 custom menu into this plugin istead of just using all of the pages to populate the menu?

  6. Hello,

    Nice work and thanks.
    Is there a simple way to change the (sort) order of pages without any parents ?

    I’ve managed to change the order of the page wich have a parent, but my Welcome page keeps poping up at the bottem of the list.

    Regards,
    Pancho

  7. ????????????? | WordPress ???

  8. This is probably a really dumb question but for the life of me I cant figure it out. I have several parent categories all with many children. When the parent is expanded the children titles all start underneath the bullet. The site I am working on is http://www.allachporcelain.com/wp Any advice would be greatly appreciated. This plugin is exactly what I was looking for Thanks!

    • If you want to remove the bullet you should check your styles.css and remove any references to: url(“../../images/icons/bulletrbl.png”)

  9. Sure. Try adding this to your styles.css:

    div.nice_navigation ul ul li {
    padding-left: 17px !important;
    }

    I think it should do the trick.

  10. Hi, do you think you will add a shortcode implementation for the widget? I would love to be able to include the navigation list, with optional page excerpts, on parent pages.

    See the last screenshot on this page for what I think would be pretty cool functionality:
    http://wordpress.org/extend/plugins/extended-page-lists/screenshots/

    Also, what green users like myself will find very helpful is some real-world examples of how to use the Arguments field, including correct syntax. I initially dismissed your plugin because I thought it always displays all pages and wanted the navigation to only show a section of the site. Luckily, on a second review pass, I digged deeper and realized this is simple to do by just adding the “child_of=[Page_ID]” in the argument field.

    Your plugin is best from what I’ve seen but some of its power may be missed without a little more documentation.

    Thanks!

    • Thanks for the feedback Strategerizer!

      The shortcode is a good idea. I’ll try to find the time to fix this.

      I will also try to make more examples.

  11. Thanks for the reply. One of the instances where I find shortcodes indispensable is pages that require full width page template. On these pages, without a widgetized sidebar, I still need to show the subpage nav. So I think that would be most useful.

    I think second priority (very useful but not critical) is the ability to have the shortcode for parent pages. In a nested hierarchy the parent pages are there mainly as gateway portals to the children so having a shortcode that automates the typical intro/excerpt to the children will be a real time-saver.

    Thanks for listening.

    BTW – I have not figured out what the Function drop-down does. Tries “List pages” and “List pages as menu” and both look the same. Would you give me a clue?

    Thanks for such a great plugin. I have customized the CSS so it fits perfectly my site but the best thing is how well it works functionally!

  12. Hi,

    Great plugin! Thanks for all your hard work and attention to detail.

    I was wondering what I need to do so that the navigation expands on load (So all the child pages are shown). I’ve tried editing the .js file, but have not had any luck. Your help would be greatly appreciated.

    Thanks in advance.

  13. Answer to my own questions above…

    For some reason my server wasn’t updating, so when I deleted the necessary line to expand menu on load.

    So, here it is. To expand menu on load you need to delete the following line from the script.js file:

    $nice_navigations.find(“ul ul”).hide();

  14. Answer to my own question above…

    For some reason my server wasn’t updating, so when I deleted the necessary line to expand menu on load.

    So, here it is. To expand menu on load you need to delete the following line from the script.js file:

    $nice_navigations.find(“ul ul”).hide();

  15. Is there any way to make Nice Navigation work on a WordPress 3.0 Custom Menu?

    I’d like to have my Custom Menu in my sidebar do the expand/contract magic that Nice Navigation does with pages.

    Scott

  16. Thanks for sharing a great plugin.

    I have a lot of pages and it was taking 20 seconds to display a page when the Nice Navigation plugin was enabled.

    I found that the following code runs much faster on my system, and each of the pages were displayed in about 2 seconds instead of 20 seconds.

    I replaced the nice_navigation_page_css_class function with the following code…

    ================================
    function nice_navigation_page_css_class($class, $page) {
    // Get the pages children, if it has any
    $pages = get_pages();
    $page_children = get_page_children($page->ID, $pages);

    // Checks if a page has children
    if (!empty($page_children)) {
    $class[] = “page-has-children”;
    }
    return $class;
    }
    ================================

    The above code seems to work fine for me, but you will need to test it before adopting it as a replacement for the original function.

    Kind regards
    John

  17. Hi!
    Really nice plugin, sir. Extremely useful for the site I’m currently developing, thanks a lot for the effort.

    I’ve sadly found an issue with my navigation in a quite deep and branched page tree:
    If I start randomly poking around the expand/collapse arrows (not clicking any link), I will get to a point in which a click does not expand the subpages under the arrow, but rather collapses some parent above the clicked page.
    This may happen right on the first click, or down to a ten click sequence… it seems quite random.
    Also, this behaviour does not seem to relate to a particular clicking sequence, I have not been able to duplicate the error doing the same clicking twice, nor predict it or find any pattern to it.

    I’m afraid that’s all the info I can provide right now, my site is not live yet. I’ve tested on FF, Safari and Chrome with the same results.
    I’ll drop a note as soon as I find more info, or my site goes live.
    Thanks a lot again for the plugin!

  18. Hi.. tahnks very usefeul plugin!

    I have a question:

    there is a way to display the menu on rollover instead on click?

    or a way to make all the parents title clickable?

    Lot of thanks

    dRes

  19. Hi,

    What is the best way to provide NiceNavigation a custom page label?

    For SEO purposes I want page name to be long and descriptive. But for sidebar navigation I want the page name to be short.

    I discovered that using AllInOne SEO plugin I can provide a custom page label that is picked up by Nice Navigation. Now I switched to WordPress SEO but it does not provide a way to give pages a custom label name. Looking more into it I discovered a separate plugin through which I can provide page labels. But I am wondering if there is a better way, using the built-in WP3 custom menus.

    Any thoughts on this?

    Related threads:

    http://wordpress.org/support/topic/custom-label-like-all-in-one-seo?replies=8

    http://wordpress.org/support/topic/plugin-nice-navigation-request-use-custom-page-label?replies=3

    Thanks!

  20. IS there a way to show only ancestors (parents, grandparents, etc.) and offsprings (children, grandchildren, etc.)?

    Reason being the website section I am using this on is getting quite large and Google does not like too many links on the page. So I would like to not show cousins (e.g. children of a parent sibling). So the user would be limited to going up/down/lateral in one hop. This should cut a lot of links crawlable on the page. IF user want to go to the cousin, tehy would need to go to the uncle first.

    Is this possible?

    Thanks!

  21. Can the display order be set to match the WordPress menu order. Nice Navigation appears to list only in alphabetical order.

  22. Hi,

    I don’t know if you are aware of this but it looks like the NiceNavigation plugin has an unfortunate effect on the load of the wp-admin login page.

    My login page is taking 30-40 seconds to load and googling a fix for this I came accross the suggestion that it is likely plugin related. So I disabled all my plugins and have narrowed it down to NiceNavigation.

    Without it the load time is 7-9 seconds, with it is 30-40 seconds. I have the plugin installed in the main subsite of my multisite WP installation, running the latest version of WP.

    Any advice?

    (I really like the plugin and would love to be able t0 keep it!)

  23. If you’d known how long (it’s been years) I’ve been trying to accomplish this exact sidebar navigation! Thank you from the bottom of my heart! It works perfectly!

  24. Daily Tip: Add a Sexy Navigation Widget to Your WordPress Site | Vosoughi

  25. Daily Tip: Add a Sexy Navigation Widget to Your WordPress Site | SNS Online

  26. wp-coder.net » Daily Tip: Add a Sexy Navigation Widget to Your WordPress Site

  27. A Free wordpress newsletter » Daily Tip: Add a Sexy Navigation Widget to Your WordPress Site

  28. A nice plugin but it doesn’t work with custom menus it seems. The dropdown choice is only of pages, categories etc….:-(

    Am I right?

  29. Hi,

    This is a great plugin!

    But I would really like to show pages that are children of the current page. Or even children siblings. This is possible using `child_of=’.$post->ID.’` as the argument – but this doesn’t work in the plugin. Is it possible for your plugin to do this? I’m not sure if I’m making a mistake or it is not possible.

    This would be a really common feature I think if it is not already possible. Listing parent and all decedents would be even better: http://codex.wordpress.org/Template_Tags/wp_list_pages#List_parent_Page_and_all_descendant_Pages

    Perhaps there could be tick boxes to select some of these “advanced” options?

    Thanks for the plugin!

  30. Hi,

    This plugin works great, but I cannot seem to tweak it.

    Basically, I want ALL parent pages to be hidden EXCEPT for the current parent page and its child pages.

    If on a child page, then you should see:
    -the ONE parent page
    -all its child pages
    -with current child page highlighted in bold.

    Can anyone help with this? I have tried many codes in the exclude field, but cannot get it to work.

    Many thanks.

  31. Hi,

    This plugin works great, but I cannot seem to tweak it.

    Basically, I want ALL parent pages to be hidden EXCEPT for the current parent page and its child pages.

    If on a child page, then you should see:
    -the ONE parent page
    -all its child pages
    -with current child page highlighted in bold.

    Can anyone help with this? I have tried many codes in the exclude field, but cannot get it to work.

    Many thanks.

    Alex.

  32. Hi there, I am looking for the same information as Alex and Taz above. I’d like it to show only the page I’m on and the children of that page. I beleive a plugin called WenderHost Subpages has exactly this functionality as its main trick, if you were able to add something like this your plugin would pretty much kill all competition.

    As it stands, I cannot have my whole website tree displayed on every page as it has 9 top level pages and many child pages per top level page 🙁

  33. How can I put the code anywhere on my blog? I want it to customize it and appear anywhere but the sidebar.

    • Right now it’s only available as a widget. Perhaps in the future it will be possible to add it manually anywhere…

Leave a Reply