Navigation · Elementor
Breadcrumbs widget for Elementor
A breadcrumb trail for the current page, with separators and styling in Elementor.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A breadcrumb trail for the current page, with separators and styling in Elementor.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Breadcrumbs”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Show Home”, “Home Label”, “Separator”, “Gap”. Style and Content tabs are listed on this page.
When to use it
- Under a page title.
- A WooCommerce product template.
- A documentation-style layout.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Breadcrumbs — Show Home | Switcher inspector control (`kng_show_home`). |
| Breadcrumbs — Home Label | Printed in the widget HTML from render(). |
| Breadcrumbs — Separator | Saved on the widget and consumed in render(). |
| Breadcrumbs — Gap | Spacing/size control (min 0, max 30). |
| Breadcrumbs — Show Current Item | Switcher inspector control (`kng_show_current`). |
| Breadcrumbs — Hide Parent Pages | Switcher inspector control (`kng_hide_page_parents`). |
| Breadcrumbs — Hide Post Type Archive | Switcher inspector control (`kng_hide_post_type_archive`). |
| Breadcrumbs — Hide Taxonomy Segments | Switcher inspector control (`kng_hide_taxonomy_segments`). |
| Breadcrumbs — JSON-LD Schema | Switcher inspector control (`kng_enable_schema`). |
| Breadcrumbs — Use Custom Path | Manually define breadcrumb items. Disable "Show Home" if you add Home manually. |
| Custom Items — Label | Text inspector control (`kng_custom_label`). |
| Custom Items — Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Custom Items — Mark as Current | Switcher inspector control (`kng_custom_is_current`). |
| Breadcrumbs — Custom Items | Repeater rows; render() loops each item to build the list or slides. |
| Breadcrumbs — Append Current Page | Adds the current page if no item is marked as current. |
| Styles — Alignment | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Styles — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-breadcrumbs__link, {{WRAPPER}} .king-addons-breadcrumbs__text,…`. |
| Styles — Link Color | Writes CSS `color` onto the widget’s front-end markup. |
| Styles — Link Hover Color | Writes CSS (link, color) onto the widget’s front-end markup. |
| Styles — Current Item Color | Writes CSS `color` onto the widget’s front-end markup. |
| Styles — Separator Color | Writes CSS `color` onto the widget’s front-end markup. |
| Styles — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-breadcrumbs`. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Breadcrumbs actually change on the page?
A breadcrumb trail for the current page, with separators and styling in Elementor. Inspector labels from this widget’s PHP include “Show Home”, “Home Label”, “Separator”, “Gap”.
How do I add Breadcrumbs in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Breadcrumbs”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related navigation widgets
Mega Menu
A menu widget that can hold Elementor content in dropdowns — columns, cards, CTAs — not only nested links.
Off-Canvas Content
A panel that slides in from the edge: mobile menu, filters, or extra content you do not want on the canvas.
One Page Navigation
Anchor navigation for a one-page layout. Links scroll to sections; styling is CSS-only.
Search (AJAX, live results, filters)
AJAX search with live results and optional filters. This is a search field, not a posts grid.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Breadcrumbs after you activate it.