Divi breadcrumbs are secondary horizontal navigation links that show website users where they are within the navigation hierarchy relative to the home page.
Each link in the link chain represents a new level of hierarchy on the website, and by adding them to your website, you can improve usability and SEO.
Breadcrumbs are not included in the Divi Theme by default.
Breadcrumbs on divithemeexamples.com showcase gallery show that you are in the Divi Products and Services category, which sits below the showcase gallery, and home page in the site hierarchy. Breadcrumbs show in WooCommerce pages by default, but not on regular pages and posts.
If you want to show breadcrumb navigation on your Divi website, the easiest way to add them would be via a paid 3rd party plugin. WordPress breadcrumbs plugins would also work, but they may need extra customization to fit well into Divi.
If you are willing and able to do a little extra work and copy & paste some code into your website files then there are free options too.
In this article, you will be given 5 options for displaying breadcrumb navigation links in Divi.
Why should you use breadcrumbs?
Not every website will need to use breadcrumbs, but for some larger sites with a multi-level site structure, it can be useful for both your users and for a potential Google ranking boost.
Breadcrumbs will help your users visually see exactly where they are in the site hierarchy and allow them to click to go up or down within that hierarchy. This can lead to more page views as users can easily see areas of the site that may be related to their initial inquiry with the site.
There can also be a benefit in terms of Google rankings as a clear structure will help Google better understand what your site is about and how pages of related information are grouped together. These breadcrumbs will often be included in the organic search results too, which can help with CTR.
4 ways to add breadcrumbs to Divi
There are a number of different ways to add Divi breadcrumbs, so take a look at the list below and choose a solution that works best for your website.
The first option uses the free Yoast plugins but does require you to copy & paste some extra code into your website files. Styling your breadcrumbs will also require the use of extra code. Another popular free alternative to Yoast breadcrumbs would be the Breadcrumb NavXT plugin, but this also requires a little extra coding to display the breadcrumbs.
Options 2,3, and 4 are paid Divi plugins designed specifically for Divi and do not require you to add any code to your website files when adding or styling the breadcrumbs. These would be the best options if you want to keep things simple and are not comfortable with code.
1. Yoast SEO plugin (free plugin + extra code required)
Yoast is a popular freemium SEO plugin for WordPress, so there is a good chance you are already using it on your website.
It includes an option to turn on breadcrumbs, but you will also need to then add some extra code manually to your website in order for the breadcrumbs to display.
How to add breadcrumb navigation with the Yoast SEO plugin
Step 1: Install and activate the Yoast SEO plugin.
Step 2: In your WordPress dashboard go to SEO > Search Appearance > Breadcrumbs and click on the ‘Enabled’ toggle option.
Step 3: The Yoast breadcrumbs are now activated, but you will need to manually add them into your website before they will display.
You will need to edit your header.php file by adding the following code at the very end of the file.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
Step 4: With your breadcrumbs now added to your site you can add CSS to style the CSS ID #breadcrumbs that was attached with the code in step 3. You can style any way you like but you will need to use the breadcrumbs ID such as;
#breadcrumbs{/*Add your CSS styles here*/}
This will require some knowledge of CSS, or you can search for Yoast breadcrumbs styling and there are several code snippets available for various styling options.
Price: Free
More information
2. Divi Breadcrumbs Module plugin (paid plugin)
This plugin from the creator of the Divi Booster plugin allows you to easily add breadcrumbs to Divi with a Divi Breadcrumbs Module.
- Adds a new breadcrumbs module to Divi
- Automatically generated breadcrumb links
- Customizable home link text and icon
- Various style options within the module settings
- Add breadcrumbs manually to selected locations or site-wide
- Compatible with Divi and Extra themes
This plugin is sold for $9.95 and includes automatic updates for life. unlimited installs. and a 60-day no questions money-back guarantee.
Price: $9.95
More information
3. Divi Breadcrumbs plugin (paid plugin)
This plugin from Divi Space allows you to easily add breadcrumbs to Divi with a Divi Breadcrumbs Module.
- Uses the Divi built-in icon set
- Plug-and-play with no setup configurations
- Customize the styling via the WordPress Customizer
- Compatible with Divi and Extra themes
This plugin is available to buy via a number of options including a single site license for $10.00 per year, a 3 site license for $19.00 per year or an unlimited site license for $39.00 per year.
The plugin is also available as part of the Divi Space annual membership plan which costs $199.00 or the lifetime membership which costs $449.00 as a one-off payment.
All purchases (except lifetime membership) are billed annually unless you cancel your subscription. Products need a yearly license for support and updates.
Divi Space offers a no questions asked 14-day money-back guarantee on all purchases.
Price: $10+
More information
4. Divi Plus plugin (paid plugin)
This plugin from Divi Extended allows you to add breadcrumbs to Divi and comes as 1 of a number of other modules included with the plugin.
- Multiple breadcrumbs layout styles
- Follows Google guidelines
- Divi Plus also includes modules for headings, text, separator, and before-&-after slide
Price: $39 (includes multiple modules)
More information
Final Thoughts on using breadcrumbs in Divi
If you have a simple 5-page brochure style website then there are no benefits in adding breadcrumbs, but for large multi-level websites, they can prove to be a great addition. Making it easy for users to navigate your website should be a high priority, especially if there is a lot of information to access. Giving Google a clear indication of how your site is structured is an added bonus.
If you have added breadcrumbs in a unique way to your Divi website feel free to drop a link in the comments below.
There is an easier way to add the Yoast breadcrunbs. There is a shortcode, so no need modify any files.
[wpseo_breadcrumb]
You would still need to add the shortcode via theme builder or theme files so it is getting added sitewide tho right?
It’s a normal shortcode. Several way to add it side wide. When the theme builder didn’t exist yet, I used a page layout with a global module that contains the shortcode. Now I guess I would put it in the theme builder. I wouldn’t modify theme files.
The PRO editions (The paid ones), are they easier to use? I don’t like to mess in the coding of the site!
Not tried this one, but there is https://wordpress.org/plugins/breadcrumbs-divi-module/ its FREE
Thanks for the post. I try to chane the code.
Thanks for the post and the free version of that.
I added the breadcrumb successfully but i’m not able to style it.
And I’m asking myself why I should use the class #breadcrumbs{/*Add your CSS styles here*/}?
In Step 3 we are adding php code, yes, but no class or id.
If I inspect the site later on, there is no ID or class as well.
Hopefully you can help me ou on this one 🙂
code updated above.