Adding Breadcrumbs to the Divi Builder

|

A common and useful feature of many websites is breadcrumb navigation links. Breadcrumb links are a list of links usually starting with the homepage and working down through more and more specific categories, ending at the current page. This helps users understand their location within the site, and quickly navigate up towards the homepage. The result of adding breadcrumbs is improved usability and increased time on site.

The Divi Theme doesn't come with support for breadcrumbs, but there are now several options for easily adding breadcrumbs to Divi and the Divi Builder.

Divi Breadcrumbs Module by Divi Booster

I'll start with my own offering. My Divi Breadcrumbs Module comes packaged as a standard WordPress plugin which, when installed, adds a new module into the Divi Builder. This module automatically generates a list of breadcrumb links for the current page / post and offers options for styling the breadcrumb links, separator icons and background. All breadcrumbs generated are optimized for SEO.

Update: the plugin now includes an option to enable breadcrumbs site-wide, below the Divi / Extra header.

The Divi Breadcrumbs Module is currently available for a one-off price of $9 which includes free updates for life and unlimited installs.

Divi Breadcrumbs Module by Codecrater

Another Divi Breadcrumbs module is this one by Codecrater. It adds a module to the Divi builder, which offers similar functionality to my own. This includes automatic generation of breadcrumbs, SEO benefits and a range of styling options for the background, links and separator icons.

At the time of writing it is selling for $15.

Fullwidth Breadcrumbs Module by Optimus Divi

Note that this plugin is still for sale, but no longer under development. 

Different again from the previous options is this module from Optimus Divi. While all the previous modules perform automatic generation of breadcrumb links, Optimus Divi have opted for a manual approach. The links are manually added via the module options and are displayed in full-width on the page.

The Fullwidth Breadcrumbs module from Optimus Divi costs $5. 

Breadcrumbs Plugin by Aspen Grove Studios

Aspen Grove Studios have released their own Breadcrumbs plugin to add to the above options. Similar to many of the above it adds a Divi Builder module which allows you to add breadcrumbs into any Divi Builder layout. It also allows you to add a site-wide breadcrumbs bar below the header, which can be styled through the theme customizer.

Aspen Grove Studios' offering has a range of pricing options, starting from $10 for a one year license on a single site, up to $89 for a lifetime license.

Breadcrumbs Divi Module by LearnHowWP

Breadcrumbs Divi Module is a free option available on the WP plugin directory. Though free, it offers many of the same features as the premium breadcrumbs plugins in this list, such as separator icons and link styles.

Using a Shortcode to Add Breadcrumbs to Divi

Another way to add breadcrumbs to the Divi Builder is by installing a general WordPress breadcrumbs plugin which includes a shortcode for displaying breadcrumbs. The shortcode can placed into a Divi code module and then positioned wherever you like within your Divi Builder layouts. The Yoast SEO plugin, for example, provides the following breadcrumbs shortcode: Home » Blog » Adding Breadcrumbs to the Divi Builder.

Manually Adding Breadcrumbs to Divi

If you'd prefer to get hands on and add breadcrumbs manually, there are a couple of tutorials out there for adding breadcrumbs by integrating free plugins such as Yoast into Divi. Note that they require some coding and should ideally be done within a child theme to avoid changes from being overwritten when Divi is updated. Ash Weblog gives code snippets for integrating with Yoast SEO and Breadcrumb NavXT, while Elegant Themes offer another tutorial on adding breadcrumbs using Yoast SEO.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

4 Comments

  1. John-Pierre Cornelissen Big Thanks you save my $ :D

    Reply
  2. Very useful but something is missing… Yoast has an undocumented shortcode to insert a breadcrumb. You can put it anywhere you like with the Divi code module. This is the shortcode:

    [wpseo_breadcrumb]

    Reply
    • Cool, thanks for sharing that John-Pierre. I figured some general WP plugins would offer a breadcrumbs shortcode, but I hadn't got round to figuring out which ones. I've added a section to the post, and if I track down more breadcrumbs shortcodes I'll add those too. Cheers!

      Reply
  3. Extremely useful! I love the possibility of styling the breadcrumb links. It looks amazing!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.