How to Add a Menu Cursor Icon Without a Link in YOOtheme Pro (Joomla 5 & Joomla 6)
YOOtheme Pro makes it easy to create modern navigation menus for Joomla websites. However, there are situations where you may want to display an icon in the navigation bar without linking it to a page.
A common example is a search icon, shopping cart icon, account icon, or custom action button that triggers JavaScript functionality rather than opening a traditional URL.
In this tutorial, you will learn how to create a menu cursor icon without a link in YOOtheme Pro using Joomla 5 and Joomla 6.
Why Use a Menu Icon Without a Link?
Icons can improve navigation and user experience by providing quick access to important website functions.
Common use cases include:
-
Search icons
-
Shopping cart icons
-
User account icons
-
Mobile menu triggers
-
Popup launch buttons
-
Contact action buttons
-
Custom JavaScript triggers
In these scenarios, the menu item acts as a visual control rather than a standard navigation link.
Step 1: Create a New Menu Item
Navigate to:
Dashboard → Menus → Your Menu → New
Create a new menu item.
For the Menu Item Type, select:
System Links → URL
Step 2: Configure the Menu Item
Enter the following value into the Link field:
#
This prevents the menu item from navigating to another page.
You can leave the menu title empty or use a descriptive title depending on your design requirements.
Step 3: Add a Custom Icon
Open the menu item settings and assign your preferred YOOtheme icon.
Popular choices include:
-
Search
-
Cart
-
User
-
Mail
-
Phone
-
Menu
-
Settings
The icon will appear in the website navigation just like any other menu item.
Step 4: Prevent Page Jumping
Using a “#” URL may cause the page to jump to the top when clicked.
To avoid this behavior, add a custom class to the menu item:
menu-icon-action
Then add the following JavaScript:
document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.menu-icon-action a').forEach(function(link) { link.addEventListener('click', function(e) { e.preventDefault(); }); }); });
This prevents the default link behavior while allowing custom scripts or popups to be triggered.
Alternative Solution Using JavaScript
If the icon should trigger a specific action, you can attach custom JavaScript events instead of linking to a page.
Examples include:
-
Opening an off-canvas menu
-
Launching a search modal
-
Opening a contact form
-
Triggering a login popup
-
Starting a custom animation
This provides greater flexibility while keeping the navigation clean.
Compatibility
This solution works with:
-
Joomla 5
-
Joomla 6
-
YOOtheme Pro
Because it uses standard Joomla menu items, it remains compatible with future updates and does not require modifications to Joomla core files.
Best Practices
When using menu icons without links, keep the following recommendations in mind:
-
Use recognizable icons
-
Add tooltips for accessibility
-
Ensure mobile compatibility
-
Avoid excessive icon-only navigation
-
Test keyboard navigation and screen readers
Good usability improves both user experience and accessibility.
Conclusion
Creating a menu cursor icon without a link in YOOtheme Pro is a simple way to add interactive functionality to your Joomla website.
Whether you are building a search button, shopping cart icon, account shortcut, or custom popup trigger, this approach provides a clean and update-safe solution that works with Joomla 5 and Joomla 6.
FAQ
How do I add a menu icon without a link in YOOtheme Pro?
Create a Joomla URL menu item and use # as the link target. Then assign an icon in the menu item settings.
Can I use the icon to open a popup or modal window?
Yes. The menu item can trigger JavaScript actions such as search popups, login forms, or off-canvas menus.
Will this work with Joomla 6?
Yes. The solution works with both Joomla 5 and Joomla 6.
Does this require modifying YOOtheme Pro files?
No. The method uses standard Joomla menu functionality and is update-safe.
Which icons work best in navigation menus?
Search, shopping cart, user account, phone, mail, and menu icons are the most commonly used options.
