How to add Divi breadcrumbs (5 options)

This post is a guide to using breadcrumbs with Divi and covers what they are, why to use them, and what plugins can be used to add them.

• What are Divi breadcrumbs?
• Yoast SEO plugin
• Breadcrumbs Divi Module plugin
• Divi Supreme plugin
• Divi Breadcrumbs Module plugin
• Divi Plus plugin
• Why you should use breadcrumbs

What are Divi breadcrumbs?

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.

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 an 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 explicitly designed 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 add some extra code manually to your website 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 add them to your website before they will display manually.

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
Visit Yoast website

2. Breadcrumbs Divi Module plugin (free plugin)

This plugin from learnhowtowp is a free Divi plugin available to download from the official WordPress plugin repository and allows you to easily add breadcrumbs to Divi with a Divi Breadcrumbs Module. After you install and activate this breadcrumbs plugin a new module will be added to the Divi Builder called Breadcrumbs. You can then add the module just like any Divi module with the Divi Builder.

• Visual Builder Supported
• Choose any Divi Icon as the Separator
• Change Colors for Links, Text, and Icon
• Free to use

Price: free
Visit WordPress plugin repository

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
Divi Supreme plugin via Elegant Themes (Affiliate Link)

4. 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
Visit Divi Booster website

5. 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, separators, 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
Divi Plus plugin via Elegant Themes website (Affiliate Link)

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.

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.