How to Create WordPress Menu Items Without a Link

WordPress is a platform that is suitable for everyone, including people with absolutely zero coding knowledge. Pair this CMS with the right WordPress theme, and you can create virtually any kind of website imaginable.

There are some elements that all websites have in common, regardless of the niche. For example, in order to ensure users can find their way around with ease, every website needs to have a good navigation menu. And if you run a multi-layered website with a lot of content, in that case you need to create a mega menu to enable effective user navigation. A well-structured menu is an absolute must because it allows users to swiftly find and access parts of a website they’re interested in.

When adding menu items to your menu in WordPress, by default, every item needs to have a link and take the user somewhere upon a click. Of course, there are instances when the link is not needed, when it’s superfluous.

Here’s what we’ll talk about:

When to Use Unlinked Menu Items

The main purpose of unlinked menu items, which we also call “no-link” or “dead” items, is to create subheadings or group items in a menu. For example, if we have a menu with several pages related to a specific topic, we may want to create one or more unlinked menu items to serve as subheadings for those groups of items.

Furthermore, we can use unlinked menu items for informational or purely decorative purposes. For example, we can add one such item with a divider or an icon to create separate sections in the menu. Alternatively, we may want to add a no-link menu item with some text that provides additional info and thus enhances the navigation and contextual understanding.

Now, let’s see how to create WordPress menu items without a link.

Creating a Menu Item Without a Link

In your admin dashboard, go to Appearance > Menus.

Under Add menu items, click on Custom Links. If you don’t see this option, scroll to the top of the page and in the upper right corner look for Screen Options.

Click on it, look for the Custom Links, and check this box.

Let’s go now to Custom Links. This option will appear in the Add menu items section. In the URL field enter a hashtag (#). In the Link Text field enter the name of the menu item you’re about to create.

When you finish, press the Add to Menu button. Once you save the changes the new menu item will appear within the menu structure on the right.

You can now click on the menu item to open its options. If you leave the ‘#’ sign in the URL field, the new menu item will appear as if it were linked, but, upon clicking on it, users will go back to the top of the page they’re currently browsing. If you delete the hashtag and leave the field empty, the page they’re browsing will refresh when they click on the menu item.

Luckily, there’s a simple solution to this as well.

How to Make Menu Items Unclickable

To make it clear that a menu item is unlinked, you can also make the mouse cursor display as the default icon when a user hovers over that menu item. If you’re using one of Qode Interactive’s premium WordPress themes, you can do this by simply checking the Don’t link box.

This will not only show the default cursor upon hover, but will also make the menu item unclickable (i.e. if a user clicks on the menu item, nothing will happen).

In case you are not using one of our themes, you can keep the default cursor on hover and make the link unclickable via some simple CSS. In Appearance > Menus click on Screen Options at the top of the page and make sure the CSS Classes box is checked.

Next, go to the menu item you’ve previously unlinked and look for the CSS Classes option. Write unclickable in that field and then click Save Menu.

Now that you have created the class, add the following code to your CSS:

.unclickable > a {
pointer-events: none;
}

And that’s all there is to it. Users now won’t be able to click on any menu item with the unclickable class.

…and That’s a Wrap!

We’ve come to the end of our tutorial on how to create WordPress menu items without a link, and we’ve also showed you how to make your pointer on hover disappear. As you make modifications in your admin dashboard and in CSS, don’t forget to save all the changes you make along the way. And remember, clear navigation is a very important component of a good UX. Your visitors should be able to seamlessly go from one page to the next, so plan your menu structure well, but also feel free to experiment with the look of the menu. Explore the possibilities of hidden menus or fullscreen navigation, but always make sure that your website is understandable and easy to use.