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

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

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Random Divi Posts