The Breadcrumbs Module in Divi 5¶

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.

Overview¶

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.

Adding 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 Breadcrumbs module and click on it to load it. Alternatively, you can use the Search option to find it.

Click the gray plus icon to insert 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.

Settings & Options¶

Once you've added the Breadcrumbs Module, its settings panel opens automatically. The settings are organized into three tabs: Content, Design, and Advanced.

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.

The Content tab showing home text, URL, and separator options.

Setting	Type	Description
Home Text	text	The label for the first item in the trail. Defaults to "Home." Supports Dynamic Content.
Home URL	url	The destination URL for the first item. Defaults to your site's home page. Supports Dynamic Content.
Separator	text	The character or symbol that appears between each item in the trail (for example, / , > , or \| ).
Link	group	Make the entire Breadcrumbs Module clickable, sending visitors to a page, section, or external URL when they click anywhere on the module.
Elements	toggle	Toggle on or off any optional pieces of the breadcrumb trail.
Background	group	Choose the Breadcrumbs Module's background color, gradient, image, video, or pattern.
Loop	group	Enable the Loop Builder to repeat the module across a set of items.
Meta	group	Set the module's label inside the Visual Builder and force its visibility while editing.

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

The Design tab with sub-element styling options.

Setting	Type	Description
Layout	select	Choose the visual style for the breadcrumb trail and how items align inside the module.
Breadcrumb	group	Style the wrapper that contains the entire trail. Available sub-options: Background, Text, Sizing, Spacing, Border, Box Shadow.
Breadcrumb Link	group	Style every clickable item in the trail except the home item. Available sub-options: Background, Text, Sizing, Spacing, Border, Box Shadow.
Home Link	group	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, Box Shadow.
Separator	group	Style the symbol or icon that sits between each item. Available sub-options: Background, Text, Sizing, Spacing, Border, Box Shadow.
Sizing	group	Set the Breadcrumbs Module's overall width, height, and alignment.
Spacing	group	Adjust the module's outer margin and inner padding.
Border	group	Add or style the module's border and rounded corners.
Box Shadow	group	Apply a shadow around the module.
Filters	group	Apply visual filters such as hue shifts, saturation changes, and blending modes.
Transform	group	Scale, rotate, skew, or translate the module.
Animation	group	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.

Advanced Tab¶

The Advanced tab gives experienced designers extra control - custom CSS, semantic HTML, conditions, interactions, visibility, transitions, position, and scroll effects.

The Advanced tab with CSS and conditional logic options.

Setting	Type	Description
Attributes	group	Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the module.
CSS	text	Add custom CSS to fine-tune the Breadcrumbs Module beyond the built-in design options.
HTML	select	Choose the semantic HTML tag wrapping the module (such as nav or div ).
Conditions	group	Show or hide the module based on conditions like logged-in status, post category, or date.
Interactions	group	Trigger custom behaviors, such as showing or hiding the Breadcrumbs Module when another element is clicked.
Visibility	group	Hide the Breadcrumbs Module on phone, tablet, or desktop.
Transitions	group	Set how long the module's hover and state animations take.
Position	group	Pin the module to a specific spot on the page or relative to its container.
Scroll Effects	group	Animate the Breadcrumbs Module as the visitor scrolls.

Code Examples¶

/* TODO: Add CSS targeting .et_pb_breadcrumbs for custom styling */

// TODO: Add PHP filters for breadcrumb trail manipulation

Overview¶

Use Cases¶