---
title: "Breadcrumbs Bar Widget Settings Overview"
url: https://theplusaddons.com/docs/breadcrumbs-bar-widget-settings-overview/
date: 2023-10-26
modified: 2026-04-10
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/Breadcrumb-Widget_-Settings-Overview-1024x536.jpg
word_count: 979
---

# Breadcrumbs Bar Widget Settings Overview

## Key Takeaways

- Breadcrumbs Bar widget from The Plus Addons for Elementor adds beautiful breadcrumbs to an Elementor website.
- The Plus Addons for Elementor requires the PRO version to access the Breadcrumbs Bar widget.
- Users can choose from two unique breadcrumb styles in the Breadcrumbs Bar widget settings.
- The Breadcrumbs Bar widget allows users to show or hide home, parent, or current page links in the breadcrumb trail.

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.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-breadcrumbs/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Breadcrumbs Bar widget is activated. To verify this, visit The Plus Addons → Widgets → and search for Breadcrumb and activate.

## Learn via Video Tutorial:

https://www.youtube.com/embed/Bzbl0LmNZ1s

## How to Activate the Breadcrumbs Bar Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2023/10/Tpae-Breadcrumbs-Bar-Activate-1.png)

## Key Features

- **Two Styles** - You can choose from two unique breadcrumb styles.

- **Fullwidth Breadcrumb** - You can easily make a full-width breadcrumb. 

- **Home Title/Icon** - You can easily add an icon or title to the home link.

- **Extra Option** - You can easily show or hide the home page, parent page, or the current page from the breadcrumb trail. 

## How to Add a 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](https://nexterwp.com/docs/nexter-theme-builder-explained/), or you can use Elementor Pro if you are already using it.

### Breadcrumbs Style

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

![](https://theplusaddons.com/wp-content/uploads/2023/10/Tpae-Breadcrumbs-Bar-Layout.png)

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

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

### Content

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 to the home text in the breadcrumb. Here you’ll find two options - 

- **None** – To display the home text without any icon.

- **Icon** – you can add an icon or image to the home text in the breadcrumb.

![](https://theplusaddons.com/wp-content/uploads/2023/10/Tpae-Breadcrumbs-Bar-Content.gif)

Based on your selection, you’ll find different icon options to add the home text in the breadcrumb.

From the **Icon Font** dropdown, you can select and add an icon based on the chosen Icon Type. Here you’ll find three options:

- **FontAwesome** – To add classic icons, from the FontAwesome icon library.

- **Icons Mind** –To add clean and minimal icons, from the Icons Mind library.

- **Icon Image **–To add an image for the home text, select an image and set its size using the **Image Resolution** dropdown.

Based on your selection, you’ll find different group controls for an Icon Type.

### Separator Icon

From the **Select Icon** dropdown, you can add an icon or image as a separator in the breadcrumb. Here you’ll find two options - 

- **None** – To display the separator without any icon.

- **Icon** – you can add an icon or image as a separator in the breadcrumb.

![](https://theplusaddons.com/wp-content/uploads/2023/10/Tpae-Breadcrumbs-Bar-Seprator-Icon.gif)

Based on your selection, you’ll find different icon options to add as a separator in the breadcrumb.

From the **Icon Font** dropdown, you can select and add an icon based on the chosen Icon Type. Here you’ll find three options:

- **FontAwesome** – To add classic icons, from the FontAwesome icon library.

- **Icons Mind** –To add clean and minimal icons, from the Icons Mind library.

- **Icon Image **–To add an image as a separator, select an image and set its size using the **Image Resolution** dropdown.

Based on your selection, you’ll find different group controls for an Icon Type.

By enabling the **Enable Icon for CPT toggle**, you will see an icon for CPT (Custom Post Types).

### Special Option

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

![](https://theplusaddons.com/wp-content/uploads/2023/10/Tpae-Breadcrumbs-Bar-Special-Option.png)

**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.

### Extra Option

In the Extra Option 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.

![](https://theplusaddons.com/wp-content/uploads/2023/10/Tpae-Breadcrumbs-Bar-Extra-Option.png)

## 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.

![](https://theplusaddons.com/wp-content/uploads/2023/10/Tpae-Breadcrumbs-Bar-Style.png)

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

**Separator** - From here, you can manage the separator icon padding, size, and color.

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

**Separate Background ** - 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 widgets. This adds a scrolling animation as the widget comes into the viewport.

[Learn more about On Scroll View Animation](https://theplusaddons.com/docs//on-scroll-view-animation/)

Advanced options remain common for all our widgets; you can explore all their options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

Suggested reading, [how to add breadcrumbs on custom post types single page](https://theplusaddons.com/docs//add-breadcrumbs-on-custom-post-types-single-page/).

## Frequently Asked Questions

**Q: How do I add breadcrumbs in Elementor free?**
A: To add breadcrumbs in Elementor, you need to use the Breadcrumbs Bar widget from The Plus Addons for Elementor. First, ensure you have the Elementor FREE Plugin and The Plus Addons for Elementor installed and activated. Then, add the Breadcrumbs Bar widget to your header template for it to be accessible throughout your website.

**Q: How do I remove breadcrumbs in WordPress Elementor?**
A: To remove breadcrumbs in WordPress using Elementor, you can simply deactivate the Breadcrumbs Bar widget from The Plus Addons for Elementor. Go to The Plus Addons u2192 Widgets, search for the Breadcrumbs widget, and turn off the toggle. This will remove the breadcrumbs from your site.

**Q: What are the key features of the Breadcrumbs Bar widget?**
A: The Breadcrumbs Bar widget offers several key features, including two unique styles, the ability to create a full-width breadcrumb, and options to add an icon or title to the home link. You can also show or hide the home page, parent page, or current page links, making it highly customizable for your site's navigation.

**Q: What settings work best for styling the Breadcrumbs Bar widget?**
A: For optimal styling of the Breadcrumbs Bar widget, focus on typography, color, and border settings under the Style tab. Adjust the home icon's padding, size, and color, and manage the separator icon's attributes as well. These settings enhance the visual appeal and usability of the breadcrumbs on your site.

**Q: What common mistakes do people make when setting up breadcrumbs?**
A: A common mistake when setting up breadcrumbs is not placing the Breadcrumbs Bar widget in the header template, which limits its visibility across the site. Ensure you add it to the header so that users can navigate easily from any page. Additionally, neglecting to customize the home title or icon can lead to a less engaging user experience.