The Divi Breadcrumbs Module displays a clickable trail that shows visitors where the current page sits inside your site - for example, Home → Blog → Category → Post. It helps visitors orient themselves, makes it easy to step back up the hierarchy, and gives search engines a clear signal about your content structure.
This article covers how to add the Breadcrumbs Module to a page, walks through every setting on the Content, Design, and Advanced tabs, and explains how the module's sub-element design groups work alongside Divi 5's Composable Settings. If you're building breadcrumbs specifically for a WooCommerce product page, use the Woo Breadcrumbs Module instead.
[Screenshot: Breadcrumbs module displayed in the Visual Builder]
Add a Breadcrumbs Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Accordion module and click on it to load it. Alternatively, you can use the Search option to find it.
The Breadcrumbs Module Use Cases
Site-wide navigation aid: Place the module inside a Theme Builder header so every page on your site shows the same breadcrumb trail.
Deep content hierarchies: Use breadcrumbs on blogs, knowledge bases, or documentation sites where visitors land on pages several levels below the home page.
Accessibility and SEO: Give visitors a visible content trail and search engines a structured navigation path that mirrors your site's information architecture.
Breadcrumbs Module Settings Breakdown
Once you've added the Breadcrumbs Module, its settings panel opens automatically. The settings are organized into three tabs:
The Content Tab
The Content tab is where you set the home item's text and link, choose a separator, and configure background, link, and other shared options.
Content - Configure the text and starting link for the breadcrumb trail.
Home Text - The label for the first item in the trail. Defaults to "Home." Supports Dynamic Content.
Home URL - The destination URL for the first item. Defaults to your site's home page. Supports Dynamic Content.
Separator - The character or symbol that appears between each item in the trail (for example, /, >, or |).
Link - Make the entire Breadcrumbs Module clickable, sending visitors to a page, section, or external URL when they click anywhere on the module.
Elements - Toggle on or off any optional pieces of the breadcrumb trail.
Background - Choose the Breadcrumbs Module's background color, gradient, image, video, or pattern.
Loop - Enable the Loop Builder to repeat the module across a set of items.
Meta - Set the module's label inside the Visual Builder and force its visibility while editing.
The Design Tab
All the design styles for the Breadcrumbs Module live on this tab.
The Breadcrumbs Module breaks the trail into four sub-elements:
the Breadcrumb wrapper,
the clickable Breadcrumb link items,
the Home link,
and the Separator between items.
Each sub-element exposes its own Background, Text, Sizing, Spacing, Border, and Box Shadow option groups through Divi 5's Composable Settings. If one of those option groups isn't visible inside a sub-element, hover over the sub-element and click the Toggle Options icon to enable it.
Layout - Choose the visual style for the breadcrumb trail and how items align inside the module.
Breadcrumb - Style the wrapper that contains the entire trail. Available sub-options: Background, Text, Sizing, Spacing, Border, and Box Shadow.
Breadcrumb link - Style every clickable item in the trail except the home item. Available sub-options: Background, Text, Sizing, Spacing, Border, and Box Shadow.
Home link - Style only the first item in the trail (the one set by Home Text and Home URL). Available sub-options: Background, Text, Sizing, Spacing, Border, and Box Shadow.
Separator - Style the symbol or icon that sits between each item. Available sub-options: Background, Text, Sizing, Spacing, Border, and Box Shadow.
Sizing - Set the Breadcrumbs Module's overall width, height, and alignment.
Spacing - Adjust the module's outer margin and inner padding.
Border - Add or style the module's border and rounded corners.
Box Shadow - Apply a shadow around the module.
Filters - Apply visual filters such as hue shifts, saturation changes, and blending modes.
Transform - Scale, rotate, skew, or translate the module.
Animation - Add an entrance or hover animation to the module.
Note: Save a styled Breadcrumbs Module as a Preset using Option Group Presets so the same Composable Settings stay enabled everywhere you reuse it.
The Advanced Tab
The Advanced tab gives experienced designers extra control - custom CSS, semantic HTML, conditions, interactions, visibility, transitions, position, and scroll effects.
Attributes - Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the module.
CSS - Add custom CSS to fine-tune the Breadcrumbs Module beyond the built-in design options.
HTML - Choose the semantic HTML tag wrapping the module (such as nav or div).
Conditions - Show or hide the module based on conditions like logged-in status, post category, or date.
Interactions - Trigger custom behaviors, such as showing or hiding the Breadcrumbs Module when another element is clicked.
Visibility - Hide the Breadcrumbs Module on phone, tablet, or desktop.
Transitions - Set how long the module's hover and state animations take.
Position - Pin the module to a specific spot on the page or relative to its container.
Scroll Effects - Animate the Breadcrumbs Module as the visitor scrolls.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
