How to Make a Non-Clickable Menu Item in WordPress
Tailoring your website to meet specific user experience needs can be a subtle yet powerful way to enhance your online presence. For those using WordPress, one common client request is the creation of non-clickable menu items.
This feature allows visitors to hover over a menu item and view a dropdown of options without the main item being a link itself. This can be particularly useful for organising content under categories without needing a dedicated page for the category itself.
The ability to customise your WordPress menus goes beyond the simple addition of pages and posts. With clever use of custom links and a little know-how, you can create a menu that functions exactly as desired.
This involves a workaround that circumvents the default behaviour of WordPress menu items, essentially adding an item that, initially clickable, can be transformed into a non-clickable placeholder for other navigational elements.
If you want this done for you, get in contact and I’ll be happy to manage it.
Key Takeaways
- Crafting non-clickable menu items in WordPress improves site navigation and user experience.
- Use custom links with a placeholder to create non-clickable menu elements.
- After adding the placeholder, remove the link to finalise your non-clickable menu item.
Customising the WordPress Navigation Menu Bar
Creating Menu Headings Without Links
When setting up your WordPress menu, you may find yourself in a situation where you need a menu item to act merely as a pointer for a dropdown list rather than as a clickable link leading to another page. Achieving this involves a straightforward workaround.
To begin with, you’ll create what is known as a custom link to replace the current page link in your menu. Attempting to insert a blank URL will not work, so you must initially fill the URL field with a placeholder, such as a hash (#) symbol, to add the item to your menu.
Here are the steps to make a menu item non-clickable:
- Navigate to the Appearance > Menus section of your WordPress dashboard.
- Click on ‘Custom Links‘ to expand the option.
- Input the hash symbol (
#) in the URL field and name your menu item (e.g. “Services”). - Add this custom link to the menu.
- Remove the actual page that the menu item represents.
- Adjust your menu structure accordingly.
- Save the menu.
Now you can refresh your website to see that the item appears, but it still functions as a link due to the placeholder. To resolve this:
- Go back to your menu settings.
- Remove the hash symbol (
#) from the URL field of the custom link you created. - Save the changes again.
Upon refreshing your website, you will find that the menu item now hovers to reveal the dropdown options without being a clickable link itself.
| Action | Description |
|---|---|
| Add Custom Link | Select ‘Custom Link’ from menu options. |
| Name the Link | Input the desired label, e.g. “Services”. |
| Insert Placeholder | Type # in the URL field. |
| Finalise Addition | Add the item to your navigation menu. |
Once included, replace the real ‘Services’ page with your new custom link to maintain menu aesthetics.
Eliminating the Placeholder URL
The next step is making sure your placeholder doesn’t act like a typical hyperlink. Navigate to the menu settings, find the newly created placeholder link, and simply clear the URL field, leaving it empty.
Although it may seem counterintuitive, WordPress allows the deletion of the URL post-adding the item, despite not permitting an empty URL during the initial process.
| Steps | Instructions |
|---|---|
| Access Menu Item | Open ‘Menus’ and locate the placeholder link. |
| Remove URL | Delete the # symbol from the URL box. |
| Save Changes | Confirm the adjustment by saving your menu setup. |
Now, when the cursor hovers over the menu label, it won’t transform into a clickable pointer, indicating a non-clickable state of the item.
The final result is a navigation label void of a URL destination, serving as a visual and organisational element on your website’s menu, without redirecting visitors.
Finalising Your Menu Structure
After this update, refreshing your website should show that the ‘Services’ menu item no longer behaves as a link. However, the cursor might still change to a hand icon due to default browser behaviour.
This can be adjusted with CSS to change the cursor to a text icon, ensuring users understand it’s non-clickable.
Keep in mind that this method can be used whenever a menu item is intended to be non-interactive, regardless of the theme utilised. The approach provided will assist you in creating cleaner and more intuitive navigation for websites where some menu headers serve as categorisers rather than links to separate pages.
Resolving Cursor Icon Issues
After this adjustment, the menu item will no longer act as a hyperlink. However, the cursor icon may still show as a pointer, which might be confusing.
If you notice that the cursor does not change to a text icon when hovering over the menu item, it might be due to overriding CSS rules.
If you encounter this, consider these steps:
- Add a specific CSS class to the menu item to control the cursor’s appearance.
- Implement CSS to that class such as
cursor: default;to override the default behaviour.
