---
title: "Breadcrumbs Bar Widget Settings Overview"
url: https://theplusaddons.com/docs/breadcrumbs-bar-widget-settings-overview/
date: 2023-10-26
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Breadcrumbs show visitors where they are on your site and give them a one-click way back up the hierarchy. The Breadcrumbs Bar widget from The Plus Addons for Elementor builds..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/Breadcrumb-Widget_-Settings-Overview-1024x536.jpg
word_count: 1107
---

# Breadcrumbs Bar Widget Settings Overview

## 

- The Breadcrumbs Bar widget from The Plus Addons for Elementor builds the trail automatically from the page being viewed, and one widget in a header template covers the whole site.
- Breadcrumbs Style offers two looks, rounded pills and arrow chips, and Breadcrumbs Full Width appears only with the first style tile selected.
- Home Title defaults to Home, Separator Icon starts as None with a default chevron, and Icon Font includes Font Awesome, Icons Mind and Icon Image.
- Letter Limit > Current shortens the last step to a set number of characters, but it works on posts and custom post type singles, not on pages.

Breadcrumbs show visitors where they are on your site and give them a one-click way back up the hierarchy.

The **Breadcrumbs Bar** widget from The Plus Addons for Elementor builds that trail automatically from whatever page is being viewed, and lets you style every part of it.

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

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

## Before You Start

- **Edition:** **Free** — the Breadcrumbs Bar widget is in the free plugin as well as Pro, and the trail it builds is the same in both.- **Widget to enable:** Breadcrumbs Bar, switched on under **The Plus Addons > Widgets**.- **Where to add it:** the template for the pages you want it on — a header template shows it site-wide, a single or archive template shows it on those pages only.- **Font Awesome:** the home icon and the separator icon are Font Awesome icons, but the widget does not load Font Awesome itself. On a page where nothing else loads it, both icons come out blank.

## How to Activate the Breadcrumbs Bar Widget

- Go to **The Plus Addons > Widgets**.- Search for **Breadcrumbs Bar** and turn its toggle on.

![The Plus Addons Widgets screen with the Breadcrumbs Bar widget searched and its toggle on](https://theplusaddons.com/wp-content/uploads/2023/10/Tpae-Breadcrumbs-Bar-Activate-1.png)

Then add the widget to the Elementor template for the pages you want it on. A header template puts it on every page; a single or archive template limits it to those pages.

## Breadcrumbs Style

**Breadcrumbs Style** in the first section offers two picture tiles. The first tile (a row of rounded pills) is the default; the second draws each step as an arrow chip.

![Breadcrumbs Style shown as two picture tiles in the widget panel, with the first tile selected](https://theplusaddons.com/wp-content/uploads/2026/09/breadcrumbs-style.webp)

The second tile gives an arrow-chip trail:

![Front-end breadcrumb in the second style: Home, Company, Our Team and Leadership as amber arrow chips](https://theplusaddons.com/wp-content/uploads/2026/09/breadcrumbs-result-style-2.webp)

With the first style selected you also get **Breadcrumbs Full Width**, which stretches the bar across the full width of its container. The toggle is hidden while the second style is selected.

![Breadcrumbs Full Width toggle in the widget panel, shown below Breadcrumbs Style](https://theplusaddons.com/wp-content/uploads/2026/09/breadcrumbs-full-width.webp)

**Alignment** sets Left, Center or Right, and can be set separately for desktop, tablet and mobile.

![Alignment control with Left, Center and Right options, set per device in the widget panel](https://theplusaddons.com/wp-content/uploads/2026/09/breadcrumbs-alignment.webp)

## Content

**Home Title** is the text of the first step, **Home** by default. **Select Icon** chooses between **None** and **Icon**; with **Icon**, the **Icon Font** dropdown offers **Font Awesome**, **Icons Mind** and **Icon Image**.

![Home Title field set to Home in the Content section, with Select Icon and Icon Font below it](https://theplusaddons.com/wp-content/uploads/2026/09/breadcrumbs-home-title.webp)

![Changing the Home Title and the home icon in the Content section of the Breadcrumbs Bar widget](https://theplusaddons.com/wp-content/uploads/2023/10/Tpae-Breadcrumbs-Bar-Content.gif)

## Separator Icon

The separator is off to begin with. Set **Select Icon** in the **Separator Icon** section to **Icon** to switch it on; the default icon is a chevron.

![Separator Icon section with Select Icon set to Icon and Icon Font set to Font Awesome](https://theplusaddons.com/wp-content/uploads/2026/09/breadcrumbs-separator-icon.webp)

![Choosing a separator icon for the breadcrumb in the Separator Icon section of the widget](https://theplusaddons.com/wp-content/uploads/2023/10/Tpae-Breadcrumbs-Bar-Seprator-Icon.gif)

**Enable Icon for the CPT**, a Pro setting below the icon options, adds the separator to the post type link on a custom post type single page.

## Special Option

This section holds one popover, **Letter Limit**. Switch **Current** on and set a number to shorten the last step of the trail to that many characters.

![Letter Limit popover in the Special Option section with the Current switch and its number field](https://theplusaddons.com/wp-content/uploads/2026/09/breadcrumbs-letter-limit.webp)

## Extra Option

Three switches decide which parts of the trail are shown: **Home**, **Parent** and **Current**. All three are on.

![Extra Option section with the Home, Parent and Current switches all set to Show](https://theplusaddons.com/wp-content/uploads/2026/09/breadcrumbs-extra-option.webp)

## Settings Reference

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Breadcrumbs Style** | Picks one of two looks: rounded pills or arrow chips. | First tile |
| **Breadcrumbs Full Width** | Stretches the bar to the full width of its container. First style only. | Hide |
| **Alignment** | Aligns the trail left, centre or right, per device. | Left |
| **Home Title** | Text of the first step. | Home |
| **Select Icon** (Content) | Shows or hides an icon on the first step. | Icon |
| **Icon Font** | Font Awesome, Icons Mind (Pro) or Icon Image for that icon. | Font Awesome |
| **Select Icon** (Separator Icon) | Shows or hides the separator icon. | None |
| **Enable Icon for the CPT** | Pro only. Adds the separator to the post type link on a custom post type single page. | Hide |
| **Letter Limit > Current** | Cuts the last step to a number of characters. | Hide, 10 |
| **Home** / **Parent** / **Current** | Show or hide each part of the trail. | Show |

## What the Trail Shows on Each Kind of Page

| Page | Trail |
| ---- | ----- |
| Front page | Just the **Home** link, not a trail |
| Page | Home, then every parent page, then the current page |
| Blog post | Home, then the post's categories, then the post title |
| Category archive | A top-level category reads *Archive by "Name"*; a child category shows the parent and the child by name |
| Tag archive | Home, then *Posts Tagged "Name"* |
| Custom post type single | Home, the post type's name, then the title |
| WooCommerce product | Home, the product's categories, then the product title |
| Shop and product category archives | Home, then the shop or category name |
| Search results | Home, then *Search Results for "query"* |
| 404 | Home, then *Error 404* |
| Page 2 of an archive | The trail, then *(Page 2)* |

On a page three levels deep the trail looks like this:

![Front-end breadcrumb reading Home, Company, Our Team, Leadership as one rounded pill](https://theplusaddons.com/wp-content/uploads/2026/09/breadcrumbs-result-parent-page.webp)

## Styling

The **Style** tab groups the styling by part: **Breadcrumbs Text** for typography, colour and border, **Home Icon** and **Separator** for the two icons, and **Content Background** and **Separate Background** for the bar and the individual steps.

![Breadcrumbs Text section on the Style tab with Typography, Text Color and Border Type](https://theplusaddons.com/wp-content/uploads/2026/09/breadcrumbs-style-text.webp)

## Learn via Video

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

## How It Behaves

- The trail is built from the page being viewed, so one widget in a header template covers the whole site.- The wording of archive, search and 404 steps is fixed in the widget. There is no setting for it.- The separator icon is drawn inside each step, after its text, rather than between steps.- The widget is the same in the free plugin and in Pro; the trail it builds is identical.- The trail drawn on the Elementor canvas can differ from the one on the published page, because the editor preview does not run the same page query. Check the real trail on the published page.

## Limitations

- **Home** set to Hide is ignored on the site's front page, where the Home link is always shown.- **Parent** set to Hide is ignored on category archives. It works on pages, posts and products.- **Letter Limit > Parent** has no effect anywhere. Only the **Current** limit works.- **Letter Limit > Current** does not apply to pages. It works on posts and custom post type singles.- **Current** set to Hide removes the last step from view on pages, posts, products and tag and category archives, but the text stays in the page source, hidden with CSS.- A custom taxonomy archive shows the post type's name instead of the term, so every term of that taxonomy gets the same trail.- The widget does not load Font Awesome. On a page where nothing else loads it, the home and separator icons come out blank.- The trail is plain navigation markup. It does not add breadcrumb structured data for search engines.

## Troubleshooting

### The icons are blank

Nothing on that page is loading Font Awesome. Use the **Icon Image** option instead, or add another element that loads the icon font.

### There are no separators between the steps

Set **Select Icon** in the **Separator Icon** section to **Icon**. It is **None** to begin with.

### The trail only shows Home

You are looking at the front page. The widget shows a single Home link there, and a full trail everywhere else.

### Breadcrumbs Full Width is missing

It only appears while the first **Breadcrumbs Style** tile is selected.

## Related Docs

- [Add breadcrumbs with the parent page](https://theplusaddons.com/docs/add-breadcrumbs-with-parent-page-in-elementor/)- [Add breadcrumbs on a blog post single page](https://theplusaddons.com/docs/add-breadcrumbs-on-blog-post-single-page/)- [Add breadcrumbs on a custom post type single page](https://theplusaddons.com/docs/add-breadcrumbs-on-custom-post-types-single-page/)- [Add breadcrumbs to a category page](https://theplusaddons.com/docs/add-breadcrumbs-to-elementor-category-page/)