1. Home
  2. Docs
  3. Header Elements
  4. Breadcrumbs

Breadcrumbs EA Element

Breadcrumbs for Elementor allows you to easily add breadcrumbs on your website using Elementor page builder.  Breadcrumb is an awesome feature for visitors to keep track of their location, by this plugin you can display Breadcrumb navigation anywhere your website. This Widget improves the visibility & navigation on the website. You can insert breadcrumbs and generate paths inside your page automatically. Here in this tutorial, you’re going to learn how to use the Breadcrumbs element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Breadcrumbs Element

 

»Content

 

Breadcrumbs

⇒Display:

: Add the source of the breadcrumbs menu either the current page or a specific page. For the specific page, add the ID number of that particular page.

: Show/hide the home menu.

: Enter the home menu text here if you enable showing the home.

⇒Separator:

: Select the separator type either text or icon.

: If you select the separator type as an icon, then add an icon by selecting one here. Or if you select the text, then enter the text here.

 

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.

 


»Style

Crumbs

⇒Align: Customize the alignment.

⇒Spacing: Customize the spacing.

⇒Padding: Set the padding value for the top, right, bottom and left around the crumbs for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the crumbs for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the crumbs border.

⇒Border Radius: Set the border-radius around the crumbs for different dimensions.

⇒Background Color: Add a custom background color to the crumbs.

⇒Color: Add a custom color to the crumbs.

⇒Typography: Set the typography options for the crumbs text.

 

Separator

⇒Padding: Set the padding value for the right and left around the menu separator for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the menu separator for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the separator border.

⇒Border Radius: Set the border-radius around the separator for different dimensions.

⇒Background Color: Add a custom background color to the separator.

⇒Color: Add a custom color to the separator.

⇒Typography: Set the typography options for the separator text.

 

Current

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the current or active menu for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the current menu border.

⇒Border Radius: Set the border-radius around the current menu for different dimensions.

⇒Background Color: Add a custom background color to the current menu.

⇒Color: Add a custom color to the current menu.

⇒Typography: Set the typography options for the active menu text.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Breadcrumbs Element.


Was this article helpful to you? Yes No

How can we help?