Source: https://divicake.com/blog/how-to-add-breadcrumbs-to-divi/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How to Add Breadcrumbs to Divi By Divi Cake·7 August 2019·Updated 17 December 2024·4 min read How to Add Breadcrumbs to Divi We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Why You Want Breadcrumbs](https://divicake.com#why-you-want-breadcrumbs) - [Breadcrumbs Improve the User Experience](https://divicake.com#breadcrumbs-improve-the-user-experience) - [Breadcrumbs Improve SEO](https://divicake.com#breadcrumbs-improve-seo) - [Adding Breadcrumbs to Divi with the Divi Breadcrumbs Module](https://divicake.com#adding-breadcrumbs-to-divi-with-the-divi-breadcrumbs-module) - [Divi Breadcrumbs Module Content Tab Settings](https://divicake.com#divi-breadcrumbs-module-content-tab-settings) - [Divi Breadcrumbs Module Design Tab](https://divicake.com#divi-breadcrumbs-module-design-tab) - [Divi Breadcrumbs Module Advanced Tab](https://divicake.com#divi-breadcrumbs-module-advanced-tab) - [Ending Thoughts](https://divicake.com#ending-thoughts) Breadcrumbs are an efficient method of marking your path. Drop a breadcrumb every few steps and you’ll easily be able to go back the way you came. For websites, breadcrumbs list the pages and categories as horizontal navigation to show where you are within the navigation structure. The best way to add them to Divi is with a plugin called [Divi Breadcrumbs Module](https://divicake.com/products/divi-breadcrumbs-module/). Since it’s a Divi module, you have access to all of the expected design features to create unlimited designs to fit any Divi website. Divi Breadcrumbs Module adds its own breadcrumbs to Divi, so it doesn’t depend on other plugins such as Yoast SEO or WooCommerce to create them. It works great from the backend or frontend builders. Divi Breadcrumbs Module is a popular [extension](https://divicake.com/products/category/divi-plugins/) for Divi and was featured on the Elegant Themes blog in an article titled [Divi Plugin Highlight – Divi Breadcrumbs Module](https://divicake.com/go/divi-breadcrumbs-module/). In this article, we’ll take a look at its features and strengths. But first, let’s see the benefits of breadcrumbs. ## Why You Want Breadcrumbs Besides just looking nice, there are several good reasons to add breadcrumbs to your website. ### Breadcrumbs Improve the User Experience Breadcrumbs are great for enhancing the user experience of your website. It adds a navigation structure that creates contextual awareness. The links within the navigation structure are clickable. This means users can navigate through the structure any way they want without having to hit the back button or modifying the URL in the address bar. This also keeps them on your site longer because they’re more likely to explore. ### Breadcrumbs Improve SEO It also improves your site’s SEO because it adds a structural element that search engines like. It can also help reduce your bounce rate. When users land on a page organically they’re less likely to leave your website if the page or article wasn’t what they were looking for. Instead, they might click on the breadcrumbs to see more articles for that category. ## Adding Breadcrumbs to Divi with the Divi Breadcrumbs Module Divi Breadcrumbs Module is a new module that’s added to the Divi Builder. It works with the classic backend builder, the new backend builder, and the visual builder. The module can be placed anywhere you want within your Divi layouts. Breadcrumbs are usually near the top of the page. They work great just under the header menu. It’s a good idea to place them where they’re the most useful to your readers. Of course, this doesn’t mean you can’t experiment and see what kind of designs you can come up with. ### Divi Breadcrumbs Module Content Tab Settings The content tab includes Breadcrumbs Navigation Settings and the standard Background and Admin Label settings. Breadcrumbs Navigation Settings let you hide the Home page, add your own text for the Home page, choose the separator from 12 different designs, and hide the current page. The 12 separators include arrows, dashes, dots, stars, lines, and more. The Background settings let you adjust the background like any Divi module. Give it a solid color, gradient, image, or video. You have access to all of the image and video adjustments and effects like any Divi module. ### Divi Breadcrumbs Module Design Tab The Design Tab provides styling options for the Breadcrumbs Text, Separator Text, and Breadcrumbs Links Text. Each has its own settings that let you choose the font, font weight, style, alignment, color, size, letter spacing, line height, and shadow. You can adjust the font for the current page, links, and separators independently of the other text in the string of breadcrumbs. It also includes the standard settings for Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation. These are the standard design customizations for [Divi modules](https://divicake.com/blog/divi-modules/) and allow you to add shadows to the module, skew, rotate, filter the colors and text, blend, animate the module, etc. This is great for customizing the look of the breadcrumbs to match your site’s styling. Adjust colors, sizes, and lots more. ### Divi Breadcrumbs Module Advanced Tab The Advanced tab provides the common fields for CSS ID & Classes, Custom CSS, Visibility, and Transitions. Each includes the standard fields found in most Divi modules. For example, Visibility adds the three device types, horizontal and vertical overflow, and Z Axis. Transitions adds duration, delay, and speed curve. The Custom CSS tab adds new elements to target specific portions of the module with CSS. The new elements include Breadcrumbs, Active Breadcrumb, Breadcrumb Links, Breadcrumb Link Hover, and Separators. This opens up the styling possibilities of every element of the breadcrumbs. ## Ending Thoughts Divi Breadcrumbs Module is highly intuitive. If you can use Divi you can use Divi Breadcrumbs Module. Since the design features let you target the links, separators, and current page individually, there’s practically no limit to your design options. On top of the ability to design your breadcrumbs, it also improves your user experience and SEO. With all of these benefits, Divi Breadcrumbs Module is an excellent choice for any Divi website. You can see the plugin in the [Divi Cake](https://divicake.com/products/divi-breadcrumbs-module/) shop. We want to hear from you. Have you tried Divi Breadcrumbs Module? Let us know what you think about it in the comments. About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/) [ Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Reviews7 min read ### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off. 25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)