Breadcrumbs Element


The Breadcrumb Element is new in Avada 6.2, and 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, or watch the video for a visual overview.

You Are Here:Home|Breadcrumbs Element
View Element Demo Page!

How To Use The Breadcrumb Element

The Breadcrumbs Element is easy to add anywhere in your content. Follow these simple steps below.

Step 1. Ensure Avada Builder, or Avada Live is active.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 3. Choose Breadcrumbs from the Elements List.

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

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

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: Please note that 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 Tab

  • Prefix – Controls the text before the breadcrumb menu. Can be set globally from the Theme Options (Avada > Theme Options > Breadcrumbs / Search Bar)

  • Separator –Controls the type of separator between each breadcrumb.

  • Show Post Categories – Turn on to display the post categories in the breadcrumbs path.

  • Show Post Type Archives – Turn on to display the post type archives in the breadcrumbs path.

  • Element Visibility – Allows you to control the column’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • Element Sticky Visibility – (Only visible if parent Container is set to Sticky) 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 – Allows you to add a class for the column.

  • CSS ID – Allows you to add an ID for the column.

View The Options Screen

Design Tab

  • Alignment – Select the Breadcrumbs alignment. Choose from Text Flow, Left, Right or Center.

  • 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. Leave empty for default value.

  • Text Hover Color – Controls the text hover color of the breadcrumbs font. Leave empty for default value.

  • Margin – Controls the margins around the Element. In pixels or percentage, ex: 10px or 10%.

View The Options Screen

Extras Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

Note: The Default setting will use the global settings assigned for this element in the Global Options. This Element does not have any Global Options in the Avada Builder Element section, but instead uses the Breadcrumbs section of the Global Options to control global options for the Element as well.