Breadcrumb Bar

< All Topics

Sometimes you may need to bar in the middle of the content to navigate users through the website. Breadcrumb bars not only look good but enhance the UI/UX element for WordPress using Elementor. Make sure to add proper chronology in your Breadcrumb bar. You can create such Bars by using the Breadcrumb widget. 

Pro tip
Why not create your own Breadcrumb Bar using this widget. Website visitors go through many more pages if you have a Breadcrumb Bar. Make sure to add proper chronology in your Menu.

How to use the Breadcrumb Bar Widget of The Plus Addons For Elementor

The Breadcrumb Bar widget comes with multiple designs. Let’s understand how to use this widget in the tutorial below.

Table Of Contents

General Steps

Search for the Navigation Builder from the Elementor screen in the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.Search for the Breadcrumb Bar from the Elementor screen in the left and then drag and drop it into the content building area.

1. Content

Breadcrumb Bar setting in Breadcrumb bar widget.

Breadcrumbs Bar

Breadcrumb Bar

Select your preferred style for the Breadcrumb Bar from the dropdown. You can choose from the two options you get. 

Breadcrumbs Full Width 

You can specify whether the Menu position to be fixed or absolute. 

Alignment 

You can Align the Breadcrumb bar to either left, right, or center.  

Home Title/Icon

Home Title 

Enter the Title of Home.  

Select Icon 

You can set an Icon or Image for Home. 

Icon Font

Choose the Icon Font you want to specify for Home. 

Icon Library 

You can specify the image size of the Home.

Home Title/Icon settings in Breadcrumb bar widget.

Separator Icon

Select Icon 

You can set the Separator Icon here. 

Icon Font 

Select the Icon font for the Separator. 

Icon Library 

Select the Icon you want to display for the Separator.

Separator Icon settings in Breadcrumb bar widget.

Breadcrumb On/Off


Home 

Slide right to display Home in the Breadcrumb Bar.  

Parent

Slide if you want to display Parent in the Breadcrumb Bar. 

Current

Slide right if you want to display current in the Breadcrumb Bar.

Breadcrumb on/off in Breadcrumb bar widget.


2. Style

The Style tab is used for customizing the appearance of all the Navigation Builder widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View Style Tab Tutorial

Letter Limit

Parent 
Slide right to activate Parent

Parent  
You can set the letter limit fo the Parent category.

Current
Slide right to activate Current.

Current
You can set the letter limit fo the Current category.

Letter Limit setting in Breadcrumb bar widget.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?