How to add Divi breadcrumbs (4 options)

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 were 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 for use on a single website and includes automatic updates for life and a 60-day no-questions money-back guarantee. There is also a 3 website license for $19 and an unlimited website license for $39.

Price: $9.95
More information

3. Divi Supreme plugin (Breadcrumbs extension)

The Divi Supreme plugin is the best-selling product on the official Elegant Themes marketplace and it also includes a breadcrumbs extension. The extension allows you to display a hierarchical representation of your website’s navigation links so that your website is easier to navigate.

The plugin includes the popup extension which allows you to ;

• Add breadcrumbs to Divi
• Multiple styles of the breadcrumbs design

This plugin is available to buy via the Elegant Themes marketplace or via the developers’ website at Divi Supreme.

• This plugin is available to buy via the Elegant Themes marketplace as an unlimited site license for $79.00.
• The price includes 1 year of updates and support.
• There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.

Price – €79
More information (Affiliate Link)

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 guidelines set out by Google
• Divi Plus also includes modules for headings, text, separator, and before-&-after slide

This plugin is available to buy via the Elegant Themes marketplace or via the developers’ website at Divi Plus.

• This plugin is available to buy via the Elegant Themes marketplace as an unlimited site license for $79.00.
• The price includes 1 year of updates and support.
• There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.

Price – €79
More information (Affiliate Link)

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.