The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

Adding Breadcrumbs to the Divi Builder

A summary of the options for adding breadcrumbs
to Divi and 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.

The Divi Breadcrumbs Module is currently available for a one-off price of $9.95 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.

Divi Breadcrumbs Module by Divi Framework

Whereas the first two plugins on the list allow you to insert breadcrumb links anywhere within your Divi Builder layout, Divi Framework's module is more like the built-in Divi header module. It differs from the header module in that it adds breadcrumbs links in place of the usual header module's button. It automatically populates the header title and breadcrumbs and allows you add a subtitle and background image. There are a number of pre-defined styles to help you achieve the look you want.

The plugin costs A$25/year and is valid for installation on 25 sites. It is dependent on the Yoast SEO plugin and requires some additional configuration of the Yoast plugin to set up the breadcrumbs.

Fullwidth Breadcrumbs Module by Optimus Divi

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 and requires the use of a child theme running their free Module Extender for Divi plugin.

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: [wpseo_breadcrumb].

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.

Conclusion

Hopefully the list above helps you find the right breadcrumbs solution for your site. But please feel free to ask in the comments below if you have any questions, etc.

Want get more out of Divi?

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

3 Comments

  1. John-Pierre Cornelissen

    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
    • dan

      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
  2. Helene

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

    Reply

Submit a Comment

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