Displaying external links in the navigation

There are times when you might want to direct your website visitors to an external source (another website) to help them get something done related to your business. It might be to help them order your food using services like Uber Eats, book a room via Booking.com or Airbnb, or schedule a meeting using services like Calendly to find an available time in your calendar quickly.

Having those options listed in your main navigation menu can prove to be beneficial and help you achieve your business goals. At the same time, people visiting your website might not expect to be redirected someplace else and get confused when a page that looks nothing like your website loads up.

A good example of this practice is the way Wikipedia marks any external links in their articles. To help overcome this challenge, we built a feature that allows you to apply different styling to external links and make it obvious that clicking on that menu item will take people off the site.

If you’re in need of it, follow the steps below to have it up and running in no time:

• First, add a Custom Link to the navigation menu that links to the external source (another website). To learn how to do that, read this article; 
• Next, from your WordPress dashboard, navigate to Appearance → Customize → Menus;
• Choose a menu, then click on a menu item that you want to mark as an external link;
• In the CSS Classes* field, add the following text is-external-link 
• When you’re done, click the Publish button.

Here’s a step by step video that can guide you through:

* If you don’t see the CSS Classes field, navigate to Appearance → Menus, click on the Screen Options button from the top right corner and check the CSS Classes option. View the screenshot for details.