Home/Documentation/Builder/Elements/Design Elements/

Breadcrumbs Element

Last Update: February 14, 2023

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. Read below for details on all Element Options, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

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, and so the options screen may look somewhat different.

General

HeadingDescription
PrefixControls the text before the breadcrumb menu. Currently no default selected. Can be set globally from the Global Options.
SeparatorControls the type of separator between each breadcrumb. Leave empty for default value of /.
Show Post Categories/TermsTurn on to display the post categories/terms in the breadcrumbs path. Default currently set to Yes.
Show Post Type ArchivesTurn on to display post type archives in the breadcrumbs path. Default currently set to No.
Show Post NameTurn on to display the post name in the breadcrumbs path. Default currently set to Yes.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
Element Sticky VisibilityChoose 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 ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
AlignmentSelect the beadcrumbs alignment.
Font SizeControls the font size for the breadcrumbs text. Enter value including CSS unit (px, em, rem), ex: 10px Leave empty for default value of 12px.
Text ColorControls the text color of the breadcrumbs font. Leave empty for default value of Gray. Reset to default.Using default value.
MarginIn pixels or percentage, ex: 10px or 10%.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start. Default currently set to Top Of Element Hits Bottom Of Viewport.

In this article