Divi Booster logo

Divi Booster

Adding Breadcrumbs to the Divi Builder

Written by Dan Mossop

|

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.

Discover Divi Breadcrumbs Module

Improve your site navigation and SEO with our Divi Breadcrumbs Module. It adds a breadcrumbs module to Divi, Extra and the Divi Builder. It is SEO-optimized with semantic markup and flexible style options to get your breadcrumbs looking the way you want.
Get Divi Breadcrumbs Module

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

4 Comments

  1. CGSouq.com on March 8, 2018 at 11:07 pm

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

    Reply
  2. John-Pierre Cornelissen on July 24, 2017 at 2:34 pm

    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 on July 24, 2017 at 9:33 pm

      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. Helene on July 24, 2017 at 6:41 am

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

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Enable Automatic Looping for YouTube Videos in the Divi Video Module

Enabling automatic looping for YouTube videos in your Divi video module ensures that content plays seamlessly and continuously without interruption. This feature can enhance user engagement, highlight key information, or create dynamic visual effects on your website....

Hide Video Controls in Divi Video Module

Disabling YouTube video controls in the Divi Video Module helps create a seamless, distraction-free viewing experience for your site visitors. This approach is useful when you want full control over how your video content appears and is interacted with on the page, or...

Mute YouTube Videos by Default in the Divi Video Module

In the Divi Video Module, starting your YouTube videos muted by default can create a more user-friendly browsing experience on your webpage. It is particularly beneficial for reducing distractions, enhancing visitor engagement, and providing a seamless content preview...

Autoplay Videos in Divi Video Module

Enabling videos in your Divi video module to start playing automatically can enhance both the site's design and user engagement. To ensure full compatibility with browser requirements, such as Chrome's autoplay policy, it's often necessary to start your videos muted...

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Random Divi Posts