betty-breadcrumbs¶
betty-breadcrumbs
is a custom element to satisfy the requirement of Betty Breadcrumbs.
Markup¶
[icon]¶
Indicates the icon of the breadcrumbs, where it usually represents the icon of the current page.
Selector Rule:
betty-breadcrumbs[icon]
[trackingfeature]¶
Indicates the name of the feature that the interaction takes place. See :-foundation-tracking.
Selector Rule:
betty-breadcrumbs[trackingfeature]
[trackingelement]¶
Indicates the element this breadcrumbs represents for the purpose of tracking. See :-foundation-tracking.
Selector Rule:
betty-breadcrumbs[trackingelement]
betty-breadcrumbs-item¶
Indicates the item, where each item represents a page of the hierarchy.
The order of the items is from the current page to its ancestors.
Selector Rule:
betty-breadcrumbs > betty-breadcrumbs-item
[trackingelement]¶
Indicates the element this item represents for the purpose of tracking. See :-foundation-tracking.
Selector Rule:
betty-breadcrumbs-item[trackingelement]
Event¶
change¶
- target
betty-breadcrumbs
- bubble
- yes
- cancelable
- no
- default action
- none
This event is triggered when there is a change of breadcrumbs’ selection committed by the user.
DOM API¶
betty-breadcrumbs¶
interface BettyBreadcrumbs {
/**
* The icon of the breadcrumbs, where it usually represents the icon of the current page.
*/
icon: string;
/**
* The item element that is currently selected.
*
* When an item is selected, it means that it is the current page in the hierarchy.
*/
readonly selectedItem: Element;
}
betty-breadcrumbs-item¶
interface BettyBreadcrumbsItem {
/**
* <code>true</code> if the item is selected; <code>false</code> otherwise.
*/
selected: boolean;
}
Example¶
<betty-breadcrumbs icon="pages">
<betty-breadcrumbs-item>English</betty-breadcrumbs-item>
<betty-breadcrumbs-item>Geo Outdoor</betty-breadcrumbs-item>
<betty-breadcrumbs-item>Sites</betty-breadcrumbs-item>
</betty-breadcrumbs>