How to Create a Non-Clickable Menu in WordPress

Insert a Non-Clickable Menu Header in WordPress

When developing a website with WordPress, you might encounter this issue: you need to create an organized menu, and for that, you need a header. However, if this header should not be linked to any page, then you need to make the WordPress menu item non-clickable.

It’s a very simple task that leverages the capabilities of the HTML ID selector, which is the hash symbol (#). This character, in HTML syntax, is mainly used to create anchors within a single page: its syntax is sitename/pagename#anchor-id.
Using this trick, if we are on pagename and do not enter anything as anchor-id, clicking the link will have no effect and will keep us on the current page.

Let’s now see how to implement this system in WordPress to create a non-clickable menu. We will skip the description of how to insert a menu, assuming the reader knows this. Simply, when adding a new item, in the left column (where you choose the types), select link and then fill in the window that opens as shown in the image below:

In the URL box, enter the HTML ID selector, and in the link text, the label you want to appear.
When viewing the site, any click on the label will not generate any action, thus achieving the desired effect.