Breadcrumb JAVASCRIPT UI Component API

Breadcrumb Javascript API

Class

Breadcrumb

Breadcrumb

Breadcrumbs allow users to make selections from a range of values.

Selector

smart-breadcrumb

Properties

AaddNewItemEnables or disables the "Add new item" (+) button.
AallowDragEnables or disables the dragging of breadcrumb items.
AallowDropEnables or disables the dropping of dragged breadcrumb items.
AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
CcloseButtonsShow/Hide the close button of breadcrumb items.
DdataSourceDetermines the data source to load breadcrumb items from. The Array should contain objects. Each object defines a single breadcrumb item.
DdisabledEnables or disables the Breadcrumb.
IitemTemplateSets or gets the template of breadcrumb items. The value of this property can be the id of an HTMLTemplateElement or the HTMLTemplateElement itself. If set to null, no template is applied.
LlocaleSets or gets the language. Used in conjunction with the property messages.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
MminimizeWidthDetermines the minimum width of the Breadcrumb at which it will switch from normal to minimized mode. If set to null, the Breadcrumb does not minimize automatically.
UunfocusableIf is set to true, the element cannot be focused.

Events

CcloseThis event is triggered when a Breadcrumb item is closed.
CclosingThis event is triggered when a Breadcrumb item is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.
DdragEndThis event is triggered when a Breadcrumb item is dropped.
DdraggingThis event is triggered when a Breadcrumb item is being dragged.
AaddNewItemThis event is triggered when the "Add new item" (+) button is clicked.

Methods

AaddItemAdds an item.
MmaximizeRestores the Breadcrumb from minimized state back to normal.
MminimizeMinimizes the Breadcrumb.
RremoveItemRemoves an item.

Properties

addNewItemboolean

Enables or disables the "Add new item" (+) button.

Default value

false

Example

Set the addNewItem property. 

 <smart-breadcrumb add-new-item></smart-breadcrumb>

Set the addNewItem property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.addNewItem = false;

Get the addNewItem property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let addNewItem = breadcrumb.addNewItem;

allowDragboolean

Enables or disables the dragging of breadcrumb items.

Default value

false

Example

Set the allowDrag property. 

 <smart-breadcrumb allow-drag></smart-breadcrumb>

Set the allowDrag property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.allowDrag = false;

Get the allowDrag property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let allowDrag = breadcrumb.allowDrag;

allowDropboolean

Enables or disables the dropping of dragged breadcrumb items.

Default value

false

Example

Set the allowDrop property. 

 <smart-breadcrumb allow-drop></smart-breadcrumb>

Set the allowDrop property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.allowDrop = false;

Get the allowDrop property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let allowDrop = breadcrumb.allowDrop;

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-breadcrumb animation='none'></smart-breadcrumb>

Set the animation property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.animation = 'simple';

Get the animation property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let animation = breadcrumb.animation;

closeButtonsboolean

Show/Hide the close button of breadcrumb items.

Default value

false

Example

Set the closeButtons property. 

 <smart-breadcrumb close-buttons></smart-breadcrumb>

Set the closeButtons property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.closeButtons = false;

Get the closeButtons property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let closeButtons = breadcrumb.closeButtons;

dataSource{label: string, value: string}[]

Determines the data source to load breadcrumb items from. The Array should contain objects. Each object defines a single breadcrumb item.

Default value

[]

Example

Set the dataSource property. 

 <smart-breadcrumb data-source='[{ "label": "Planets", "value": "A" }, { "label": "Continents", "value": "B" }]'></smart-breadcrumb>

Set the dataSource property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.dataSource = [{ "label": "Countries", "value": "C" }, { "label": "States", "value": "D" }];

Get the dataSource property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let dataSource = breadcrumb.dataSource;

disabledboolean

Enables or disables the Breadcrumb.

Default value

false

Example

Set the disabled property. 

 <smart-breadcrumb disabled></smart-breadcrumb>

Set the disabled property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.disabled = false;

Get the disabled property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let disabled = breadcrumb.disabled;

itemTemplateany

Sets or gets the template of breadcrumb items. The value of this property can be the id of an HTMLTemplateElement or the HTMLTemplateElement itself. If set to null, no template is applied.

Example

Set the itemTemplate property. 

 <smart-breadcrumb item-template='template1'></smart-breadcrumb>

Set the itemTemplate property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.itemTemplate = document.getElementsByTagName('template')[0];

Get the itemTemplate property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let itemTemplate = breadcrumb.itemTemplate;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property. 

 <smart-breadcrumb locale='de'></smart-breadcrumb>

Set the locale property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.locale = 'en';

Get the locale property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let locale = breadcrumb.locale;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property. 

 <smart-breadcrumb messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-breadcrumb>

Set the messages property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let messages = breadcrumb.messages;

minimizeWidthnumber

Determines the minimum width of the Breadcrumb at which it will switch from normal to minimized mode. If set to null, the Breadcrumb does not minimize automatically.

Example

Set the minimizeWidth property. 

 <smart-breadcrumb minimize-width='100'></smart-breadcrumb>

Set the minimizeWidth property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.minimizeWidth = 200;

Get the minimizeWidth property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let minimizeWidth = breadcrumb.minimizeWidth;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property. 

 <smart-breadcrumb unfocusable></smart-breadcrumb>

Set the unfocusable property by using the HTML Element's instance. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 breadcrumb.unfocusable = false;

Get the unfocusable property. 

 const breadcrumb = document.querySelector('smart-breadcrumb');
 let unfocusable = breadcrumb.unfocusable;

Events

closeCustomEvent

This event is triggered when a Breadcrumb item is closed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onClose

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - The item that has been closed.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of close event. 

const breadcrumb = document.querySelector('smart-breadcrumb');
breadcrumb.addEventListener('close', function (event) {
    const detail = event.detail,
        item = detail.item;

	// event handling code goes here.
})

closingCustomEvent

This event is triggered when a Breadcrumb item is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onClosing

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - The item that is going to be closed.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of closing event. 

const breadcrumb = document.querySelector('smart-breadcrumb');
breadcrumb.addEventListener('closing', function (event) {
    const detail = event.detail,
        item = detail.item;

	// event handling code goes here.
})

dragEndCustomEvent

This event is triggered when a Breadcrumb item is dropped.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragEnd

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragEnd event. 

const breadcrumb = document.querySelector('smart-breadcrumb');
breadcrumb.addEventListener('dragEnd', function (event) {
	// event handling code goes here.
})

draggingCustomEvent

This event is triggered when a Breadcrumb item is being dragged.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragging

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - The item that is being dragged.
ev.detail.originalEvent - The original event that initiates the dragging operation.
ev.detail.target - The original target.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragging event. 

const breadcrumb = document.querySelector('smart-breadcrumb');
breadcrumb.addEventListener('dragging', function (event) {
    const detail = event.detail,
        item = detail.item,
        originalEvent = detail.originalEvent,
        target = detail.target;

	// event handling code goes here.
})

addNewItemCustomEvent

This event is triggered when the "Add new item" (+) button is clicked.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onAddNewItem

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of addNewItem event. 

const breadcrumb = document.querySelector('smart-breadcrumb');
breadcrumb.addEventListener('addNewItem', function (event) {
	// event handling code goes here.
})

Methods

addItem( itemDetails: any): void

Adds an item.

Arguments

itemDetailsany

An Object with the fields "index", "label", and "value".


Invoke the addItem method.

const breadcrumb = document.querySelector('smart-breadcrumb');
breadcrumb.addItem("{ index: 3, label: 'Districts', value: 'F' }");

maximize(): void

Restores the Breadcrumb from minimized state back to normal.


Invoke the maximize method.

const breadcrumb = document.querySelector('smart-breadcrumb');
breadcrumb.maximize();

minimize(): void

Minimizes the Breadcrumb.


Invoke the minimize method.

const breadcrumb = document.querySelector('smart-breadcrumb');
breadcrumb.minimize();

removeItem( item: HTMLElement): void

Removes an item.

Arguments

itemHTMLElement

The item to remove.


Invoke the removeItem method.

const breadcrumb = document.querySelector('smart-breadcrumb');
breadcrumb.removeItem("document.getElementsByClassName('smart-breadcrumb-item')[0]");

CSS Variables

--smart-breadcrumb-default-widthvar()

Default value

"400px"

smartBreadcrumb default width

--smart-breadcrumb-default-heightvar()

Default value

"auto"

smartBreadcrumb default height

--smart-breadcrumb-paddingvar()

Default value

"10px"

Padding of smart-breadcrumb and vertical offset between smartBreadcrumb items

--smart-breadcrumb-drop-down-widthvar()

Default value

"var(--smart-editor-drop-down-width)"

Width of smartBreadcrumb dropdown in minimized mode

--smart-breadcrumb-item-heightvar()

Default value

"40px"

Height of smartBreadcrumb items

--smart-breadcrumb-horizontal-offsetvar()

Default value

"10px"

Horizontal offset between smartBreadcrumb items