BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Guide

Breadcrumbs Pro

How to set up and style the Breadcrumbs widget in Elementor.

Breadcrumbs builds a trail for the page being viewed: pages with their parent pages, posts with their category or tag, archives, search results, author and date pages, and WooCommerce products. It can also add BreadcrumbList structured data for search engines. Place it in a header, page title area or single post template.

Part of: Bright Addons Pro.

See the widget page and live demo

Set it up

  1. Add the Breadcrumbs widget to a header, page title section or single template.

  2. Keep Home Link on and set Home Text and Home Icon. Leave Home Text empty to show only the icon.

  3. Choose what posts show with On Posts Show: The Category, The First Tag or Nothing.

  4. Pick a Separator type, then set Separator Icon or Separator Text.

  5. Decide on Current Page and, for long titles, Current Page Length (words).

  6. Leave Add Data for Search Engines on, unless your SEO plugin already adds breadcrumb data.

  7. Style alignment, colors and spacing in the Style tab.

Content options

Breadcrumbs

Option What it does
Home Link Adds a link to the home page at the start of the trail.
Home Text The text of the home link. Empty shows only the icon.
Home Icon An icon shown before the home text.
Blog Page Link on Posts Adds the posts page to the trail when the site has a separate posts page.
On Posts Show Adds the category, the first tag, or nothing before the post title.
Current Page Shows the current page as the last, unlinked item.
Current Page Length (words) Cuts long titles after this many words. Empty shows the full title.
Text Before Optional text in front of the trail.
Separator Chooses between an icon and text between the items.
Separator Icon The icon used as separator.
Separator Text The text used as separator, a slash by default.
Hide on the Front Page Prints nothing on the front page of the site.
Add Data for Search Engines Adds BreadcrumbList structured data to the page.
Search Results Text The wording on search pages. Keep the %s placeholder for the search words.
Not Found Text The wording shown on a page that was not found.
Bright Addons Pro

Unlock this and 80 more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Breadcrumbs

    alignment, typography, link and hover colors, current page color and typography, text before color, home icon size, and separator color, size and spacing.

  • Box

    background, border, shadow, radius and padding around the trail.

Tips

  • Switch off Add Data for Search Engines if your SEO plugin already adds breadcrumb data, so the page does not carry it twice.

  • A post with several categories uses its first category, and a hierarchical category shows its parent categories too.

  • Only published parent pages appear in the trail.

  • Inside the editor an example trail is shown where there is no real page to describe.

Questions and answers

Does it work with WooCommerce?

Yes. Products show the shop page and their product category, and product category pages show the shop page first.

Why is nothing shown on my home page?

Hide on the Front Page is on by default. Switch it off to show the home item there.

Will Google see the breadcrumbs?

With Add Data for Search Engines on, the widget prints BreadcrumbList structured data whenever the trail has more than one item.

Can developers change the trail?

Yes. The trail passes through the bapro_breadcrumbs_trail filter before it is shown.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides
[ba_docs_nav]