How to create a WordPress submenu without a blank page or duplicate link

Creating a sub-menu, or multi-level menu, in WordPress is actually pretty easy! WordPress has a guide to creating multi-level menus perfectly well explained in their documentation, roughly half-way down the general guide to creating menus.

So why do we have a post all about something WordPress has already covered? Well… if you’re creating a sub-menu in WordPress, you may have come across a problem: WordPress, by default, only wants clickable links in its menu. Sometimes, though, you want a top level menu item that exists simply to provide your website visitors with access to sub-pages below it. It’s a relatively easy task to do, but how to do it definitely isn’t made clear!

We’re going to show you how to make this happen, and then we’ll look at some more advanced tweaks to improve the usability of the menu after doing so.

How to add an unlinked submenu label in WordPress

• In the WordPress admin, go to Appearance > Menus
• In the left sidebar of that page, click “Custom Link”
• Set the URL to simply: #
• Set the ‘link text’ value to be the name you would like to be displayed in the menu
• Now add the actual pages (sub-pages) you want to appear under this heading and drag and drop them into place, nestling them underneath the menu item you just added. They will appear indented when they are submenu items.

That’s it! That’s the basic version of it. The menu will be there with its submenu options and when you click on it, it won’t take you to another page.

How to make it look and behave less like a link

And now for the somewhat more advanced (but not really) addition.

The problem that remains, from a usability standpoint, is that when a website visitor hovers over the link it still very much “feels” like you should be able to click it. It’s got the cursor for a link, it acts like a link, it’s just pointing somewhere that doesn’t go anywhere. This is probably fine, but if this drives you bonkers (hello, that’s me!) there’s a way to get around it.

You’ll need to add some CSS to your site. Go to Appearance > Customizer and open up the Custom CSS section and paste this in there, then save your changes:

a[href="#"] {
   pointer-events: none;
   cursor: default;
}

This CSS says: all links that have “#” as the target URL are to no longer be clickable (pointer-events: none;) and sets the cursor to not be the hand (cursor: default;).

You’ve now got a header in your menu which doesn’t go anywhere, can have sub-elements under it, and doesn’t hurt my head from a usability standpoint.