How to Make a Non Clickable Menu Item in WordPress

by Josh | Jul 16, 2019 | Wordpress Tutorial | 20 comments

In this tutorial, I’ll show you How to Make a Non Clickable Menu Item in WordPress. By default, when you add pages, posts or custom links to your WordPress menu, they will be a link. But what if you want to have a menu item that just displays the items below it that isn’t an actual link? This tutorial will show you just that. It’s a quick, simple, easy solution and is something that many of my clients have requested on projects in the past.

There’s only 3 steps:

Go to your menu under Appearance > Menu
Go to the Custom Link option and add an option with the display title and something in the URL field (I usually add a # symbol)Remember you can’t add a menu item with no link in the URL to the menu in WordPress.
Then, just delete the symbol in the URL field.

That’s it! Now you have a non clickable menu item on your WordPress menu. As I mention in the video, it’s not something you’ll do all the time, but I’ve had plenty of situations in the past where clients have asked to make a menu item more of an anchor to show the options below without it being an actual page or link to click on and it took me forever to finally figure this one out. So I’m happy to share the solution with you 🙂

20 Comments

rodrigo on July 16, 2019 at 4:54 pm

Good tute for those that aren’t aware of this trick.
Reply
Ahmed Ismail on July 16, 2019 at 5:12 pm

Great tutorial, Josh. I never knew about deleting the “#” after adding the custom URL to the menu. Thank you!
Reply
- Josh on July 16, 2019 at 5:14 pm
  
  Glad it helped! Yeah I found that out randomly and it’s been a great solution for me.
  Reply
Chris Corey on July 16, 2019 at 7:03 pm
To add to this, you can also change the mouse cursor so users can better understand it isn’t a clickable link:

1) In your APPEARANCE > MENUS, make sure you go to “Screen Options” (top right hand of your screen). Make sure “CSS Classes” is checked.

2) Where it says CSS Classes (Optional), add a class, no dots, just the class. Something like, “unclickable” – again, no quotations.

3) Wherever you put your own custom CSS, add this:
```
       .unclickable > a:hover {
              cursor: default !important;
        }
```
If you want a different mouse cursor, simply go here and find the one you want. You’ll see examples on the “Try It Yourself” https://www.w3schools.com/cssref/pr_class_cursor.asp

Hope that helps!
Reply
- Josh on July 16, 2019 at 7:41 pm
  
  Great solution! Yeah usually it defaults the cursor so that it doesn’t show the hand (like shown in the example site) but for some reason mine still showed the the hand in the tutorial site. Maybe it was cached or something. Appreciate the additional solution!
  Reply
- Abdullah on January 23, 2020 at 7:13 am
  
  I was looking for a way to do this, and your solution worked. Thank you for sharing.
  Reply
Chris Corey on July 16, 2019 at 7:05 pm

For #2 in my above comment, I forgot to mention that you put the CSS Class in the Custom Link. Sorry for the oversight.
Reply
Rikke Ekelund on July 18, 2019 at 8:14 am

Thank you for this tut. I wasn’t aware that this could be done, so I just popped into one of my customer’s site and removed the # symbol. Without adding the extra CSS the mouse does not show the “hand” when hovering the menu item. So your solution works perfectly as is!
Reply
- Josh on July 18, 2019 at 5:46 pm
  
  Great to hear! Thanks for letting me know 🙂
  Reply
Kirb Ratilla on August 16, 2019 at 12:44 am

Very simple tutorial but very informative ? nice one again Josh.
Reply
Lily Zren on April 27, 2020 at 3:47 am

It’s not working for me tho. Is there any other options to make the link in the menu unclickable?
Reply
- Josh on April 27, 2020 at 10:26 am
  
  mmm it should work as shown. I’m not sure of another method…
  Reply
Taylor on May 22, 2020 at 1:25 am

I recently tried this method but my site does not have appearance available. Nothing I look at resembles your steps at all. So I am curious if your method is for the free portion of the site or paid. If that even matters at all too
Reply
- Josh on May 22, 2020 at 7:54 am
  
  This is just based off of a standard WordPress install so as long as you’re using WordPress, you should see appearance > menus.
  Reply
Mikael Andersen on July 6, 2020 at 2:46 pm

There is also another css-code that works. It seems to be nearly the same.
I found it here: https://wordpress.org/support/topic/not-to-show-hand-on-non-clickable-menu-item/

.mega-disable-link > a.mega-menu-link {
cursor: default !important;
}
Reply
- Josh on July 6, 2020 at 3:06 pm
  
  Thanks!
  Reply
Gail on November 24, 2020 at 9:11 am

Thank you!! So nice to have a workaround that didn’t involve *only* CSS editing–just a simple, easy-to-understand solution for us non-techies. Much appreciated 🙂
Reply
Chelsea on November 28, 2020 at 12:36 pm

Thank you! This was just what I was looking for.
Reply
Ryan on March 9, 2021 at 9:26 am

Thanks Much! Just applied this to a plumbing site that I am working on and it worked perfectly. Had no idea the ‘#’ can be removed.
Reply
Dick Ockers on March 12, 2021 at 7:23 am

WHAAAAAAA…. I was pulling all my hairs out of my head! This is what I wanted. Thank you so very much for sharing this with us. Deep bow of respect
Reply