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

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 '14 at 9:30
You can do this by using js. try this article. kvcodes.com/2014/07/… – Kvvaradha Feb 16 at 4:50
up vote 9 down vote accepted

I have a few ideas:

  1. Set the custom link to # which won't return anything
  2. Add a custom class to the items and then use jQuery to remove the links.
  3. Use a PHP equivalent to the jQuery method
  4. Use the Disable Parent Menu Link plugin (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
Links break. You might want to work a few of these ideas into your answer – shea May 13 '15 at 1:33
Also, #2 and #3 refer to wp_list_pages(), not wp_nav_menu() – shea May 13 '15 at 1:34

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

The simplest method I came up with was to create a Custom Link item with the Link URL value of #. This is sending the user to an empty hash on the same page, so basically links nowhere.

However, there are some side-effects of using empty hashes for placeholder links. The link will still appear and behave like a link, so it could confuse a user when they are clicking on what appears to be a link but nothing happens. The other effect is that clicking on an empty hash link will override any existing hash, sending the user to the top of the page. This might not be so worrying for a menu which is at the top of the page anyway, but it is quite jarring when the page unexpectedly jumps when you are not expecting it, especially if this is for a footer menu.

The solution is to combine the empty hash method with a piece of code to detect when empty hash links are used in the menu and to remove the href attribute from that link entirely. An a element without a href attribute is the correct HTML 5 method of creating an placeholder link.

 * Remove the href from empty links `<a href="#">` in the nav menus
 * @param string $menu the current menu HTML
 * @return string the modified menu HTML
function wpse_remove_empty_links( $menu ) {
    return str_replace( '<a href="#">', '<a>', $menu );

add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
share|improve this answer

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

As others here have suggested you can create a custom link menu item with the # as its url. Then erase the # once it is added to the menu. And finally, you can use this simple regex to strip the actual tag from those links.

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);
share|improve this answer

This will remove the click (and unstyle the item). This way, you dont have to use the custom # links in your menu.

add_action( 'wp_footer', function(){
    (function( $ ) {
        var itemm = $('#main-menu .menu-item-has-children > a');
            document.activeElement && document.activeElement.blur();
            return false;
 }, 1, 0 );
share|improve this answer

Much easier solution can be found on another question:

Admin Menu - Highlight top-level menu when on a sub-menu page (without showing sub-menu)

Look for Askelon's answer. Work's perfectly, without needing to do any preg_replaces or jquery.

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.