How to Display Breadcrumb Navigation Links in WordPress

When you visit a website and see something like “Home-> Shop-> My Account”, they are called breadcrumbs.

They serve as a “trail” to help users understand their current location on the site and how they got there. Named after the story of Hansel and Gretel, breadcrumbs help the user through site navigation.

In today's writing, we’ll cover:

• Benefits of adding breadcrumbs
• Best methods for implementing breadcrumbs on your WordPress site.
• Best WordPress plugin to add breadcrumbs to your website.

Without wasting time, let's get started-

The Benefits of Adding Breadcrumbs to Your Website

Before we get to the tutorial part, you must know the benefits of breadcrumbs-

1. Breadcrumbs provide users with a clear map of their journey, helpful on large websites such as eCommerce sites or blogs.
2. Breadcrumbs contribute to a smoother browsing experience.
3. Visitors can quickly jump to pages without relying on the main menu or the back button.
4. Search engines use breadcrumbs to understand the structure of your website.
5. Breadcrumbs can appear in search engine results, increase click-through rates, and help search engines better index your site.
6. Breadcrumb reduces bounce rates and increases engagement.
7. They are lightweight and easily adaptable

Breadcrumbs are not just a navigational help, they are a crucial component of any user-friendly and search-optimized website.

Now let's see how you can add breadcrumb navigation on WordPress sites.

How to Add Breadcrumb Navigation to WordPress Site

So we are going to show you how to add breadcrumb navigation to your WordPress site using 3 methods.

• Using a WordPress plugin
• Using Custom Code
• Using a Theme's Support.

Let's start-

1. Using a WordPress Plugin to Add Breadcrumb Navigation

As it normally happens, there is always a WordPress plugin to add any kind of functionalities to your WordPress site. There is a plugin called Breadcrumb NavXT that adds breadcrumb navigation.

This is one of the most popular WordPress breadcrumb plugins with more than 900,000+ active installations. The plugin has all the necessary features in the free version that will help you add and customize the breadcrumb navigation on your website.

Here are the steps to display breadcrumb navigation on your website-

Step 1: Install and Activate the Plugin

Firstly, install the plugin from your WordPress dashboard. Go to Plugins–> Add New and type Breadcrumb NavXT in the search box. Then install and activate the plugin-

Step 2: Configure the Breadcrumb NavXT Settings

You will find the customization options of the plugin under Settings–> Breadcrumb NavXT. You will find various options to customize the breadcrumb. But if you are short on time or have little technical knowledge, then keep the default settings.

Note: When I installed the plugin, I didn't tweak any settings. Kept the default ones. Worked fine for me.

Step 3: Add the Gutenberg Block

After configuring the settings, you need to add the Breadcrumb Trail block on the page or post you want to show breadcrumbs to. Select any page or post, choose, and add the breadcrumb Trail block.

This will add the breadcrumb navigation to the page or post-

You can also use the widget to add the breadcrumb. Just go to Appearance –> Widgets. There find the Breadcrumb Trail widget and add where you want to show the breadcrumb on your website-

This is how easily you can breadcrumb navigation to your website.

But there is a catch. You can only do this page by page or post by post. That will take a lot of your time.

If you want to do this sitewide, then you need to use custom coding.

2. Using Custom Code to Add Breadcrumb Navigation

If you have the Breadcrumb NavXT plugin installed, then you can use a bit of code to show breadcrumbs sitewide.

You can use the Theme File Editor option from Appearance or open your File Manager from CPanel and find the header.php file.

There add this code-

if (function_exists('bcn_display')) {
			bcn_display();
		}
		?>

Note: I initially had trouble while adding this code as used “<!–?php”. But the code already had an “<!–?php” from the start. That is why it was giving me an error. I have provided the only part of the code that you need to use. Copy it and place at the end of the code.

This will add sitewide breadcrumb navigation-

It's as simple as that.

3. Using Theme Support to Add Breadcrumb

You can also use the theme support to add breadcrumbs to your site. For example, in the storefront theme, go to the theme customize option. There in the widgets section, you will find the Breadcrumb NavXt block-

You can configure the settings from here. Then you can add a Breadcrumb Trail block to display breadcrumbs-

This is how you can show breadcrumb navigation to your WordPress site.

Popular Plugins to Add Breadcrumbs to Your WordPress Site

If you are not comfortable with using the Breadcrumb NavXT plugin, then there are other plugins you can use-

1. Yoast SEO

Yoast SEO is a popular plugin designed to improve your website’s SEO performance. It includes a built-in breadcrumb feature.

This makes it an excellent choice for those who want to combine navigation with SEO optimization.

The breadcrumbs are customizable, and help you to match your site’s structure and design.

Features:

• Integrates seamlessly with your website’s SEO settings.
• Offers flexibility to adjust breadcrumb structure and appearance.
• Helps search engines better index your site by including breadcrumbs in HTML markup.
• Supports posts, pages, and custom post types.

2. Rank Math

Rank Math is another highly popular SEO plugin that offers advanced features, including breadcrumbs. It’s popular for its user-friendly interface and customization options. Its breadcrumbs can be easily set up and styled to fit your website’s theme.

Features:

• Provides detailed options for breadcrumb customization.
• Automatically adds breadcrumbs to posts, pages, and other content types.
• Fully integrates with Rank Math’s suite of SEO tools for added functionality.
• Lightweight and mobile-friendly for navigation.

3. WooCommerce Breadcrumbs

WooCommerce Breadcrumbs is a plugin specifically designed for WooCommerce stores. It improves navigation by adding breadcrumbs to product pages, categories, and other store-specific sections.

Features:

• Automatically adds breadcrumbs to WooCommerce product and category pages.
• Enhances user experience by showing the product’s location in the store hierarchy.
• Customizable breadcrumb labels and separators for better aesthetics.
• Helps improve SEO by providing structured navigation for search engines.

4. Flexy Breadcrumb

Flexy Breadcrumb is a plugin designed to add customizable breadcrumbs to your WordPress site.

It works with most themes and allows you to adjust the breadcrumb design and structure to fit your website’s style. Its user-friendly interface makes it suitable for both beginners and advanced users.

Features:

• Offers multiple design options for breadcrumbs.
• Allows customization of breadcrumb hierarchy and separators.
• Supports integration with popular page builders like Elementor.
• Lightweight and optimized for fast performance

Improve Your Website Navigation with Breadcrumbs

You won't find many websites without breadcrumb navigation. It is a great way to keep customers and visitors engaged, to let them know where they are on your website. And as we said, it is great for SEO optimization as well.

Whether you like it or not, breadcrumb navigation is important for a site. Even Google says that breadcrumb navigation can improve site structure and SEO.

We have shown you 3 ways to add breadcrumbs to your website. You can follow any one of them.

So, add breadcrumb to your website and if you get stuck at any point do let us know in the comment section.