Breadcrumbs
Description
- Type name:
breadcrumbs- Optional widget
- Placement types: fixed, auto
Provides “breadcrumbs” navigation bar.
Is inserted below the hero image (if exists) or below the header.
Properties
Design [required]
Supported values:
| Value | Description | Demo |
|---|---|---|
fixed-home |
Home button not scrollable (if exists) |  |
scrollable-home |
Home button scrollable (if exists) |  |
heading |
Breadcrumbs items shown one under the other |  |
AlignByScreenEdges [optional, default: true]
Use if you want to align the widget to the edges of the content (by default it aligns to the edges of the screen).
AddHomePageLink [optional, default: true]
Add a home page icon with link to the home page before the first breadcrumbs item.
HomePageTitle [optional]
If not empty - text title will be shown instead of the home page icon (works only with "AddHomePageLink": true).
AddCurrentPageTitle [optional, default: false]
Add the current article title (without the link) after the last breadcrumbs item. Works only if the Article widget is also present in JSON config.
SeparatorDesign [optional, default: small-angle-bracket]
Separator style between breadcrumbs items.
Supported values:
| Value | Result |
|---|---|
small-angle-bracket |
> |
big-angle-bracket |
＞ |
arrow |
⮕ |
FixedPlacement [optional]
Placement name. See Fixed Placements for more information.
If undefined, the widget uses the auto placement logic.
Items [required]
Array of breadcrumbs items.
Please do not include the home page and the current page links in the items array. Use AddHomePageLink and AddCurrentPageTitle instead.
Items.Title [required]
Title of breadcrumb item.
Items.Url [required]
Valid Url for breadcrumb item link.
JSON example
[{
"Type": "breadcrumbs",
"Id": "abcABC123",
"Design": "fixed-home",
"AlignByScreenEdges": true,
"AddHomePageLink": true,
"HomePageTitle": "Home",
"AddCurrentPageTitle": false,
"SeparatorDesign": "small-angle-bracket",
"FixedPlacement": "AboveTitle",
"Items": [
{
"Title": "Cars",
"Url": "https://yoursite.com/cars/"
},
{
"Title": "Parts",
"Url": "https://yoursite.com/cars/parts/"
}
]
}]
Demo
