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.
Posted in Guides, Tips and Tricks, Web Design, WordPress
About Websavers
Websavers provides web services like Canadian WordPress Hosting and VPS Hosting to customers all over the globe, from hometown Halifax, CA to Auckland, NZ.
If this article helped you, our web services surely will as well! We might just be the perfect fit for you.
Thanks Allen, great, this was exactly what I was looking for!
Thank you very much for this! Couldn’t have figured this out on my own.
Hey Shirley! Glad we could help 🙂 If you’re ever in the market for super-fast web hosting, we’d love to have you host with us!
Just want to say thank you for this. I was trying to figure out this very issue. I so often get tired of searching through multiple “help” resources that just seem to use the same or similar words that everyone else does when they explain things. Most references I looked through completely ignored the fact that the “standard explanation” means you end up with links to pages that are meaningless… when all you want is the text heading. I was figuring I must be wrong, since no one mentioned it… and I must be missing something.