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