WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Is there any way to create a menu with dropdown list like the image below in WordPress ?

accordion menu
click to enlarge

Here, when we click on [+] sign the dropdown menu shows up, I can manage the CSS, but what would be the code to make this possible?

share|improve this question
This is a JS/css question not a WordPress question. There's nothing special on the WordPress side you need to do beyond print out a menu, which is done in every theme out there – Tom J Nowell Feb 26 '13 at 14:06
I don't want Js/Css part, possible to output the dropdown links inside a "div" and outside the <li> tag ? I wan't the code if it can output the html in a defined manner ... – Tamal Dey Feb 26 '13 at 14:16
Nav menus already do that, go look up the codex entry ( like you should have done in your research prior to asking ) and you'll see you can change that html too. You can also insert it via JS ( what happens if you insert via PHP and the js breaks or end user has js turned off? ) – Tom J Nowell Feb 26 '13 at 14:18
NO i am not geting the way to bring the dropdown portion out of the <li> tag, that's why i am asking if their is any way, as i have written, css/js is not a issue, but i am new to wordpress and i have fully read the codex part of WP_NAV_MENUS but did't find any answer. – Tamal Dey Feb 26 '13 at 14:29
I don't see why you can't do something like: <div id="accordion">title<span>arrow</span><?php wp_nav_menu(...); ?> </div>. Besides you clearly didn't view the codex or you would have spotted the items_wrap argument – Tom J Nowell Feb 26 '13 at 14:54

The code for WordPress would be:

  1. wp_nav_menu() for custom nav menus
  2. wp_page_menu() as the default fallback for custom nav menus
  3. wp_list_pages() for a list of static pages

See the linked Codex pages for the various parameters to pass to each, and the CSS classes output by each.

share|improve this answer
Hey thanks for the answer, the functions i know but how should i do that, is do you know any Key=>value pair for the same ? – Tamal Dey Feb 26 '13 at 13:44
Css class output is not possible as Jquery required for onclick function, i suppose (sorry for bad english) – Tamal Dey Feb 26 '13 at 13:45
The functions above will provide the HTML markup for the menu. If your question regards how to manipulate that markup with a particular jQuery script or library, such a question isn't WordPress-related. – Chip Bennett Feb 26 '13 at 13:52
In that case is it possible to output the dropdown links inside a "div" and outside the <li> tag ? – Tamal Dey Feb 26 '13 at 14:13
Did you read the linked Codex entries? – Chip Bennett Feb 26 '13 at 14:16

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.