betty-breadcrumbs

betty-breadcrumbs is a custom element to satisfy the requirement of Betty Breadcrumbs.

Markup

betty-breadcrumbs

Indicates the root of the component.

Selector Rule:

betty-breadcrumbs

[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>

Relationship Graph

digraph "betty-breadcrumbs" { rankdir=BT; "betty-titlebar" -> "betty-breadcrumbs" [label="related to"]; }