Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm building a horizontal menu and some of the entries on that menu will have dropdowns (sub-menus), and some won't. Those that have sub-menus are not actually pages. They're just meant to be guides for the dropdowns.

For instance, say the the horizontal menu is like follows:

Home | About Us | Products | Directions | Contact

And the "products" li item is meant to have 3 pages linked in a vertical dropdown list below it, so "products" itself doesn't actually represent a page, how can I do that in WP?

(I use WP as a CMS, with static home and inside pages. I build my own templates, style the menus in CSS, then register the menus in the functions.php and call them in the templates.) In WP you add entries to the menus via the list of pages, or by the custom links. But I don't want "products" to be linked. If I don't add a link to the custom link it won't let me add it to the menu.

Is this doable through the menus admin or do I have to approach it some other way?

Thank you for any help!

share|improve this question
heres the solution works great go check it wordpress.org/support/topic/no-page-menu-item –  user48746 Mar 10 at 9:30

3 Answers 3

up vote 6 down vote accepted

I have a few idea's:

  1. set the custom link to "#" which won't return anything
  2. Add a custom class to the items then use jquery to remove the links: http://wpgarage.com/code-snippets/how-to-remove-the-link-to-parent-pages-when-using-wp_list_pages-in-wordpress-navigation/
  3. PHP equivilate to the jquery method: http://bavotasan.com/2009/how-to-remove-the-links-to-parent-pages-in-the-wordpress-page-list/
  4. Use this plugin http://wordpress.org/extend/plugins/disable-parent-menu-link (or take it apart and write your own)
share|improve this answer
Thank You for the tips and links! As Gavin suggested, using a # for a custom link "works"; the other options may work better, though aren't as easy. Well, the plugin is probably easy but I hate to use plugins if I can accomplish the same thing more directly. I'll have to decide the best approach. Thanks again! –  PVA Oct 5 '11 at 21:17
If you plan to use it in tactile devices, be careful with using empty href=""because most tactile device users won't be able to see dropdown menu without using JS –  Simon Nov 21 '13 at 15:05

The easiest way to do it without a plugin or anything is to use the "Menus" function of wordpress.

In the Wordpress Menus page, add a new link ("Custom Links" box - if you don't see this box, click "Screen Options" at the top-right and check all) named the name of your top-level menu item, with "#" as the URL. After the link is added, click the dropdown arrow by the link's name, and remove the "#" from the URL textbox. This, in all browsers, will cause the link to not be clickable.

share|improve this answer
Thank You for that tip. It's ez, though not perfect in that the Labels still look like "links" when you mouseover, but they don't go anywhere. So it can work in a pinch. –  PVA Oct 5 '11 at 21:15
Did you read the whole comment? After the link is added, click the dropdown arrow by the link's name, and remove the "#" from the URL textbox. This, in all browsers, will cause the link to not be clickable. –  GavinR Oct 6 '11 at 13:10
Yes, thank you, I did read the whole comment. I went back through and tried again and realized my problem. When I leave the #, the word appears in the navbar but as a "dead link". When I removed the # the word didn't appear in the navbar unless I hovered over it and it would appear in a hover state. So I assume that means I have to apply CSS to the word so that it appears without being linked. I'm not sure why the hover state shows up... –  PVA Oct 6 '11 at 22:13

I solved this way: in header.php (of your theme) I searched for:

'link_before'     => '',
'link_after'      => '',

and replaced with:

'link_before'     => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("<span onclick=\"return false\">")</script>',
'link_after'      => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("</span>")</script>',

In simple words, this script checks if its parent link ends with "#", in this case it adds a span element around the content of the A tag, that disables the click.

Hope it helps :-)

share|improve this answer

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.