Do you want to display breadcrumb navigation links on your WordPress site?
Breadcrumb navigation is a secondary navigation system that tells users where they are on a website relative to the homepage.
In this article, we’ll show you how to display breadcrumb navigation links in WordPress.
What is Breadcrumb Navigation and Why Do You Need it?
Breadcrumb navigation is a term used to describe a hierarchical navigation menu presented as a trail of links. It’s often used as a secondary navigation that allows users to go up in the website’s hierarchy of pages.
Breadcrumb navigation links are different than the default navigation menu system in WordPress.
The purpose of breadcrumb navigation is to help users navigate around your website. It also helps search engines understand the structure and hierarchy of links on a web page.
Search engines like Google have started displaying breadcrumbs along with the page title in search results. This gives your website more visibility in the search results and increases your click-through rate.
Having said that, let’s take a look at how to add breadcrumb navigation links in WordPress.
Video Tutorial
If you’d prefer written instructions, just keep reading.
Add Breadcrumb Navigation with Breadcrumb NavXT Plugin
This is by far the easiest way to add breadcrumb navigation to your WordPress site. It’s flexible, easy to use, and has more options than you can imagine. See why we use Breadcrumb NavXT on WPBeginner.
First thing you need to do is install and activate the Breadcrumb NavXT plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to visit the Settings » Breadcrumb NavXT page to configure the plugin settings.
The default settings should work for most websites. However, you can customize the settings as needed.
The settings page is divided into different sections. On the general settings tab, you can define how the plugin behaves globally on your site.
It allows you to modify the breadcrumb navigation links template. You will also notice that these link templates use Schema.org parameters in the link tag.
The post types tab under plugin settings allows you to set up breadcrumb links for posts, pages, and any custom post types.
You can choose how you want to display your post hierarchy. By default the plugin will use Site Title > Category > Post Title. You can replace categories with tags, dates, or post parent.
The taxonomies and authors tabs have the similar templates for your breadcrumb navigation links.
Don’t forget to click on the save changes button to store your changes.
Showing Breadcrumb NavXT on Your Website
To display your breadcrumbs on your site, you first need to go to Appearance » Customize. From there, you’ll choose where you want your breadcrumbs to be displayed in the Position dropdown.
In the Breadcrumb Source, you’ll need to choose ‘Breadcrumb NavXT’.
That’s all for this step. You can now visit your website and see the breadcrumb navigation links by visiting any post or page.
Adding Breadcrumb Navigation Links Using Yoast SEO Plugin
If you’re already using Yoast SEO plugin, then you can use their built-in Breadcrumb navigation feature, although it’s limited in features compared to BreadcrumbNavXT plugin.
The first thing you need to do is install and activate the Yoast SEO plugin. We have a complete step-by-step guide on how to install and set up Yoast SEO plugin for WordPress.
Upon activation, you need to go to the SEO » Search Appearance » Breadcrumbs page and check the ‘Enable Breadcrumbs’ option.
Once checked, you will find several options to change how breadcrumbs would display on your site. Default settings should work for most, however, feel free to change anything you like.
Once you are done, click on the save changes button to store your settings.
Showing Yoast’s Breadcrumb Navigation on Your Site
To display your breadcrumbs on your site, you first go to Appearance » Customize. From there, you’ll choose where you want your breadcrumbs to be displayed in the Position dropdown.
In the Breadcrumb Source, you’ll choose ‘Yoast SEO Breadcrumbs’.
That’s all. You can now visit your website to see your breadcrumb navigation in action.
We hope this article helped you learn how to display breadcrumb navigation links in WordPress. You may also want to see our ultimate WordPress SEO guide to improve rankings, and our step by step guide on how to create an email newsletter to grow your traffic.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
I have tried different breadcrumbs variants now also the NavXT. The breadcrumb show up and all looks fine.
My main menu are based on pages. My articles are made as posts, I add them in categories. It’s when I visit an article and try to use a link in the breadcrumb to go back one step it goes wrong.
You may want to resave your permalinks to ensure there wasn’t a hiccup there, otherwise, you would need to reach out to the support for the plugin you are currently using for the support to take a look.
Thanks for sharing valuable content on breadcrumbs in WordPress. I really like it.
Glad our guide was helpful
The plugin is not at all documented. At least, I could not find any.
The documentation for the plugin is linked on the plugin’s page
I am using the Breadcrumb NavXT plugin and I added the code you suggested to my header.php file and it gave me this error:
“Your PHP code changes were rolled back due to an error on line 68 of file wp-content/themes/generatepress/header.php. Please fix and try saving again.
syntax error, unexpected ‘<', expecting end of file"
What do I do about this?
There are a few possible reasons, you may want to take a look at our article here: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Thank you finally problem is solved
Glad our recommendations could help
The plugin is awesome…. Thank You!
Glad we could recommend it
Hi WPBeginner,
Amazing post.
I wonder the following.
How do you make the “home” breadcrumb (in your case WPBEGINNER) appear in blogs and posts but not in your HOME page.
I mean, when you go “home” I dont see the breadcrumb, but when I click on other page I see the breadcrumb.
Thanks a lot for your time.
In our theme, we have it set to only add breadcrumbs on singular pages and not the homepage template.
Hello, I am not using any plugin and I have never enabled Breadcrumbs.
Why my search Result showing breadcrumbs help me to disable this
Thank you
same problem happened with me. So I check my theme panel and my theme had enabled breadcrumbs. you can also check your theme panel for more info about this. and I was using Newspaper theme. So if you are also using this theme then it is the one who is create difficulties for you. Disable it from there.
I have used seo yoast plugin. Breadcrumbs are being displayed on my webpages but not google search results . When will they start displaying in google search result as well ?
Hello! Do you know if is it possible to insert the breadcrumbs inside the menu? I have to design a website with a vertical side menu, and the customer wants to have the breadcrumbs at the bottom of the menu.
Is it posible to change the font size and the font color of Breadcrumb?
thanks
Hello,
I’m using breadcrumbs using the Yoast SEO method, But it’s only showing on homepage it’s not showing in Google Search.
Ex : the ideal structure should be Domain.com>Category but it’s showing as Domain.com/Category. can you please tell me how to implement this ?
Hello.. I am using breadcrumb navxt and its widget is working. I inserted the code for the header.php using “insert header and footer” plugin but I can’t see any changes to my site even after saving and refreshing it.
Pls help, because the widgets area is working but no breadcrumb is showing in my sites header.
Hi. I’m afraid to manipulate codes. In case something goes wrong, can I just delete the inserted code without consequences?
Hi Juan,
If you don’t want to use code method, then you can try the plugin method. This way you will be able to undo changes by simply deactivating the plugin.
By the way I’m using the Yoast code that you have above and it doesn’t display the correct hierarchy. It omits a link for categories, projects, galleries. Anything that isn’t a post basically gets handled the same way. It’s close, but not correct.
Thanks for posting this. I’ve been looking for a way to properly display my breadcrumb trail for the spiders. It gets a bit jenky with categories, projects, galleries and the like. I’ve been hand coding mine, but the php handles the hierarchy in the incorrect order. This is a huge help.
My child theme (GeneratePress, from their own child theme download) doesn’t have a header.php file.
I’ve added the code into the parent GP theme header.php and the breadcrumbs are working now. But when I update GP …?
Just copy the header.php to the the generate press child theme forlder.
Thanks for great post. Cheers!
Thank you so much. It is really working on my website God bless you
I followed the steps, didn’t really work for me with the posts. I just saw the ‘Home Breadcrumbs’on my homepage. How do I make it appear for my posts please? I’m using Yoast SEO
Breadcrumbs should automatically appear. If they don’t then please contact your theme’s support.
It worked…but the category do not appear before my posts, I just get Home>>posts title. How do I make categories appear before posts?
Hey! You have to set a parent page for your page that you are publishing. mine was only showing home > current page until i set the current page as ‘child’ of the articles page, and the articles page as ‘child’ of the homepage. you can do it in the page editor.
Great! This is really useful! Thanks a lot!
thanks you , really usefull