Breadcrumbs Element

Last Update: August 30, 2025

The Breadcrumbs Element offers you a way to add Breadcrumbs anywhere in your content, not just in the Page Title Bar. It’s easy to use and has a range of content and styling options.

Watch the video below for a visual overview of the Element, view the Avada Breadcrumbs Element page for live examples, and read on to see the full list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Breadcrumbs Element

The Breadcrumbs Element is easy to add anywhere in your content. Just add the Element to your desired Column.

There are a number of options which affect both what the Breadcrumbs will show and how it will display. You can select a Prefix, a Separator, font size, text color, and alignment. You can also choose whether too show Post Categories and Post Type Archives in the Breadcrumb path.

If you wish to make further customization, there are options for Element Visibility, as well as fields for a CSS Class, and CSS ID. There is also an Extras tab, if you wish to customize how the Breadcrumbs will load on the page. Once you have completed selecting your options, click on Save.

Read below for a detailed description of all element options.

Element Options

Note: The displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, so the options screen may look somewhat different.

General

Heading		Description
Prefix		Controls the text before the breadcrumb menu.
Homepage Anchor Text		Controls the text anchor of the Homepage link.
Homepage Anchor Icon		Controls the icon to replace the text in the anchor of the Homepage link. Click an icon to select, click again to deselect.
Separator		Controls the separator between each breadcrumb.
Separator Icon		Controls the icon to be used as separator, which will replace the separator text. Click an icon to select, click again to deselect.
Show Post Categories/Terms		Turn on to display the post categories/terms in the breadcrumbs path.
Show Post Type Archives		Turn on to display post type archives in the breadcrumbs path.
Show Post Name		Turn on to display the post name in the breadcrumbs path.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky Visibility		Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Alignment		Select the beadcrumbs alignment.
Font Size		Controls the font size for the breadcrumbs text. Enter value including CSS unit (px, em, rem), ex: 10px
Text Color		Controls the text color of the breadcrumbs font.
Prefix Color		Controls the text color of the breadcrumbs prefix.
Current Page Color		Controls the text color of the current page in the breadcrumbs path.
Separator Color		Controls the text color of the breadcrumbs separator.
Margin		In pixels or percentage, ex: 10px or 10%.

Extras

Heading		Description
Conditional Rendering		Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.