How to Make a Menu Item Not Clickable in WordPress

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.

Making a menu item unclickable

First, login to your site and navigate to the Menus page.

In the Menus page, click on the Custom Links section on the left.

Screenshot of the menus page

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.

Adding a custom link

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.

Screen Options button

Make sure CSS Classes box is checked off, and then close the Screen Options section.

CSS classes checkbox

Next, click on the unlinked menu item, and add a class named “unclickable.”

Adding the CSS class

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.

Keep learning with these articles

Share this article with a friend

Take our 7-day Email Course for FREE

You'll learn how to make your WordPress site look better, load faster, and make more money.

Invalid email address
You'll get one email a day for the next 7 days


  1. Ashley Ashley

    This was helpful. Thank you!

  2. Elisabeth Elisabeth

    Thanks, easily explained, I was done in seconds! 🙂

  3. Jennifer Jennifer

    Thank you for saving me money by not having to pay someone else to do it!

  4. Max Max

    Thanks, this worked for me.

  5. Maya Maya

    This is only possible in or regular WordPress but in the business plan? Because the CSS class bar refuses to show up in my free version.

    • Ben Sibley Ben Sibley

      Hi Maya,

      Yes, this tutorial is only for self-hosted WordPress installs (

  6. Caio Caio

    Works perfectly. Thanks a lot!

  7. Brad Brad

    Brilliant, thanks for the perfect guide.

  8. Vincent Vincent

    Holy cow. What a conundrum. Hard to find this answer on Google, as well!

    If someone clicked the top menu of my dropdowns for the # it always broke the dropdown, after adding the unclickable it worked fine.

    Excellent Tip, thanks!

  9. Idoia Gorosabel Gkikas Idoia Gorosabel Gkikas

    THANK YOU so much!! I read through a zillion coding options and this was exactly what I needed!

  10. Andrew Nguyen Andrew Nguyen

    Straight to the point and easy to understand steps, thank you very much!

  11. Pierrick Pierrick

    Thank you so much !
    Just a question : I try to add the class to submenus (i have a megamenu with Text – Image – Links in 3 colums) but it doesn’t seems to work. Is the a way to add it, so only the links in the final column have the pointer on hover ?

    • Ben Sibley Ben Sibley

      Make sure to add the class to every menu item in the submenu. If it still doesn’t apply for some reason, try adding an “!important” tag, like this:

      .unclickable > a:hover {
      cursor: default !important;

  12. Marbaslam Marbaslam

    Hey, thanks for this big help…!
    But there’s always a little “but”: Using theme Twentyseventeen and a childtheme as an absolute WordPress-Newbie, I found out, it doesn’t work responsive. Do I have to implement a media-query and how?
    Thanks for your highly appreciated answer 🙂

    • Ben Sibley Ben Sibley

      The menu item doesn’t link anywhere so clicking it will still have no effect on mobile. It should open the sub-menu when tapped, but I’m afraid this depends on the theme being used and the way the menu is coded.

Comments are closed.

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.