Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
Want to add an unclickable menu item to your menu?
In this post, you’ll learn the two quick steps required to make a menu item not linked, and a bonus tip for improving the user experience.
First, login to your site and navigate to the Menus page.
In the Menus page, click on the Custom Links section on the left.
The Custom Links option lets you link to any URL you want, but we’ve got a special trick instead.
In the URL input, replace “http://” with a pound sign “#,” and enter whatever text you want for the Link Text.
Click the Add to Menu button, and then you can arrange the new item in your menu. Since the menu item isn’t linked anywhere, visitors won’t be taken to a new page if they click it.
The URL field cannot be empty and using a pound sign this way is a standard convention.
Remove the pointer on hover
The menu item doesn’t link anywhere, but it still shows the “pointer” cursor when you hover over it. There’s one more step you can take to make it obvious this menu item isn’t clickable.
In the Menus page, click the Screen Options tab at the top-right.
Make sure CSS Classes box is checked off, and then close the Screen Options section.
Next, click on the unlinked menu item, and add a class named “unclickable.”
With the CSS class added, we can now target that specific menu item with CSS.
The following CSS will make the cursor stay as the default icon when hovering over the unlinked menu item.
.unclickable > a:hover {
cursor: default;
}
If you’ve never added CSS to your site before, follow this guide on adding CSS. It only takes a minute or two.
Menu items unlinked
Most WordPress webmasters will use this to make the parent menu item unclickable in a drop-down menu. While it’s a great technique for that, you can make any number of menu items unclickable, and they don’t have to be top-level menu links either.
Do you have any questions about this tutorial or a tip for other readers? Leave a comment below.
