Breadcrumbs Element

Last Update: March 13, 2024

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

General

HeadingDescription
PrefixControls the text before the breadcrumb menu.
SeparatorControls the type of separator between each breadcrumb.
Show Post Categories/TermsTurn on to display the post categories/terms in the breadcrumbs path.
Show Post Type ArchivesTurn on to display post type archives in the breadcrumbs path.
Show Post NameTurn on to display the post name in the breadcrumbs path.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
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
Text ColorControls the text color of the breadcrumbs font.
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.

In this article