Breadcrumbs Bar Widget Settings Overview

Updated on March 7, 2024 by Ananda
Table Of Content

A well-structured website with easy navigation can improve the user experience. One essential feature that can significantly improve a website’s navigation is the breadcrumb trail. Breadcrumbs are a series of links that show the user their location on a website and allow them to navigate back to previous pages quickly. Breadcrumbs can improve the usability of a website, particularly for complex sites with many pages and sub-pages.  

With the Breadcrumbs Bar widget from The Plus Addons for Elementor, you can easily add beautiful breadcrumbs to your Elementor website.

Required Setup

Learn via Video Tutorial:

How to Activate the Breadcrumbs Bar Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save.
Breadcrumb bar activate

Key Features

  • Two Styles – You can choose from two unique breadcrumb styles.
  • Fullwidth Breadcrumb – You can easily make a fullwidth breadcrumb. 
  • Home Title/Icon – You can easily add an icon or title to the home link.
  • Breadcrumbs On/Off – You can easily show or hide the home page, parent page or the current page from the breadcrumb trail. 

How to Add Breadcrumb in Elementor?

To add a breadcrumb to your Elementor website, you should add the Breadcrumbs Bar widget to the header template so it can be accessible throughout the website.

To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.

Breadcrumbs Bar

In the Breadcrumbs Style dropdown, you’ll find two pre-defined style options, you can select the suitable option.

Breadcrumb bar breadcrumbs bar

If you select Style-1 you’ll see the Breadcrumbs Full Width toggle, with this, you can make a fullwidth breadcrumb bar.

Then, from the Alignment section, you can manage the breadcrumb links alignment for different devices.

Home Title/Icon

From the Home Title field, you can change the home text of the breadcrumb.

Then, from the Select Icon dropdown, you can add an icon or image to the home text in the breadcrumb. 

Breadcrumb bar home title

Separator Icon

From the Select Icon dropdown, you can add an icon or image as a separator in the breadcrumb.

Breadcrumb bar separator icon

Breadcrumbs On/Off

In the Breadcrumbs On/Off tab, you’ll find three options – 

Home – From here, you can show or hide the home link from the breadcrumb.

Parent – From here, you can show or hide the parent page link from the breadcrumb.

Current – From here, you can show or hide the current page link from the breadcrumb.

Breadcrumb bar breadcrumbs on off

How to Style the Breadcrumbs Bar Widget?

To style the Breadcrumbs Bar widget, you’ll find all the styling options under the Style tab.

Breadcrumbs Text – From here, you can manage the breadcrumb typography, color and border.

Breadcrumb bar style

Home Icon Style – From here, you can manage the home icon padding, size and color.

Separator Style – From here, you can manage the separator icon padding, size and color.

Letter Limit – From here, you can limit the parent and current title by words separately. This can be useful feature if you have long titles in the breadcrumb. 

Content Background Style – This option is only available for Style-1. From here, you can manage the breadcrumb bar background, border, box shadow etc.

Separate Background Style – From here, you can manage the breadcrumb item padding, border radius and background color separately.

On Scroll View Animation –  This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.

Learn more about On Scroll View Animation

Advanced options remain common for all our widget, you can explore all it options from here.

View Advanced tab tutorial.

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X