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.
In the last tutorial I published, you learned how to add an external link to your menu.
Now here’s the thing…
External links in the menu are fine, but they’re fairly uncommon. Most visitors are going to be surprised when they click a menu link and leave your site. They may even think it’s part of the same site at first.
You need to add a visual indicator that lets them know the link will take them to another site, and the best way to do that is by adding an external link icon.
Add the external link icon
Subscribe to Compete Themes on Youtube
There are a few ways you can add the icon, but I’ll show you the simplest method first.
Technically, this is the “northeast arrow” icon and not an external link icon, but it gets the point across when placed right next to a link.
To add the icon, start by opening up the Customizer (Appearance > Customize) and navigating to the menu you want to edit.
In my silly example, I’m linking out to Google 😛
Click on the menu item that you want to add the icon to, and copy and paste this code into the Navigation Label: ↗
Here’s how it will display in the menu:
This icon is colorful because it is getting displayed as an emoji. As an emoji, this also means it gets displayed a little bit differently depending on the device your site is viewed with. You can preview how it looks on different devices here.
Also, please note that if you have disabled emoji support on your site, the icon will display as a plain black arrow without the box around it.
How easy is that? Just copy and paste a few characters and you’re done!
The one issue with this approach is that the icon is not customizable. If the color conflicts with your brand then you may need to try this next solution.
A more customizable solution
While there are ways to add icons with a bit of CSS, I’d rather not have you trying to write and edit code.
Instead, check out this tutorial on adding images to menu items. This way, you can find any image you want, and then add it before or after the menu item. You may find some other ways to utilize the plugin featured in that post as well.
Open the link in a new tab
Before you go, there’s one more thing you should do…
Set the menu item to open in a new tab.
The external link icon helps a lot and many visitors will open the link in a new tab, but just to be on the safe side, we’ll make the link always open in a new tab. This will help you keep more of your hard-earned visitors on your site.
Making menu items open in a new tab is actually really tough to figure out because the setting is hidden by default. Follow this guide on opening links in new tabs to see how to complete this final step.
Conclusion
There are plenty of reasons to add an external link to your menu. However, without an indicator, they can lead to a bad user experience.
By adding an icon to the menu item, visitors will know they’re about to leave the site before they click. Furthermore, opening the page in a new tab will keep them from accidentally exiting your site.
If you have any questions or feedback about this tutorial, leave a comment below.
