Breadcrumb — Smart UI JavaScript API

Breadcrumb — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Breadcrumb - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-breadcrumb id="demo-breadcrumb"></smart-breadcrumb>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.breadcrumb.js';

    const el = document.getElementById('demo-breadcrumb');
    if (el) {

      el.dataSource = [
        { label: 'Home' },
        { label: 'Products' },
        { label: 'Smart UI' },
        { label: 'Grid' }
      ];

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Breadcrumb   Framework: JavaScript   Selector: smart-breadcrumb

API counts: 13 properties, 4 methods, 5 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: addItem(), maximize(), minimize(), removeItem()

Common events: close, closing, dragEnd, dragging, addNewItem

Module hint: smart-webcomponents/source/modules/smart.breadcrumb.js

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

Class

Breadcrumb

Breadcrumb

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

Selector

smart-breadcrumb

Quick picks

dataSourcedisabled

Properties

AaddNewItemControls the visibility and functionality of the "Add new item" (+) button. When enabled, users can click the button to create and add new items. When disabled, the button is hidden or inactive, preventing the addition of new items.
AallowDragControls whether users can drag and reorder breadcrumb items. When enabled, breadcrumb items become draggable, allowing users to change their order within the breadcrumb navigation. When disabled, breadcrumb items remain static and cannot be moved.
AallowDropAllows you to control whether users can drop dragged breadcrumb items onto the breadcrumb navigation. When enabled, users can rearrange breadcrumb items by dragging and dropping them; when disabled, dropping is prevented.
AanimationSpecifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Otherwise, this property determines how animations are applied to the element.
CcloseButtonsControls the visibility of the close (remove) button on individual breadcrumb items, allowing users to optionally display or hide the button for removing specific items from the breadcrumb navigation.
DdataSourceSpecifies the data source used to populate the breadcrumb items. The data should be provided as an array of objects, where each object represents an individual breadcrumb item with its corresponding properties, such as label, link, and any additional attributes required for display or navigation.
DdisabledControls whether the Breadcrumb navigation component is disabled. When enabled, the Breadcrumb provides users with a navigational trail;
IitemTemplateDefines the template used to render each breadcrumb item. This property accepts either the ID of an '<template>' element (as a string) or a reference to an actual 'HTMLTemplateElement'. When specified, the template determines the structure and content of each breadcrumb item. If set to 'null', the default rendering is used and no custom template is applied.
LlocaleSets or retrieves the current language code (e.g., "en", "fr", "es") used for localization. This property works together with the messages property to select and display the appropriate translation strings based on the specified language.
MmessagesDefines or retrieves an object containing all user-facing text strings within the widget that can be localized. This object allows customization of the widget’s displayed text in different languages and works in conjunction with the locale property to support internationalization and localization. Use this property to provide translations for messages, labels, and other interface text in the widget.
MminimizeWidthSpecifies the minimum width (in pixels) at which the Breadcrumb component transitions from its normal display to a minimized mode. If this value is set to null, the Breadcrumb will always remain in its normal mode and will not automatically minimize, regardless of the container's width.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus or being selected using keyboard navigation (such as with the Tab key). As a result, users will not be able to focus on this element using standard keyboard interactions.
UunlockKeySets or retrieves the value of the unlockKey property, a unique key required to unlock and access the product's features. Use this property to specify the unlock key when enabling product access, or to obtain the current unlock key associated with the product.

Events

AaddNewItemThis event is triggered whenever the user clicks the "Add new item" (+) button. It typically indicates the user's intent to create or insert a new item into the current list, collection, or data structure. The event can be used to initialize the process for adding a new item, display a relevant input form, or handle any additional logic associated with item creation.
CcloseThis event is triggered whenever a breadcrumb item is removed or closed by the user—such as when a close icon within a breadcrumb segment is clicked. It can be used to detect and respond to changes in the breadcrumb navigation, allowing you to update application state, UI elements, or perform cleanup tasks as needed.
CclosingThis event is fired just before a Breadcrumb item begins the closing process. You can intercept and prevent the item from closing by invoking event.preventDefault() within your event handler. This allows you to add custom logic, such as displaying a confirmation dialog or validating conditions, before the Breadcrumb item is allowed to close.
DdragEndThis event is triggered when a user completes a drag-and-drop operation by dropping a Breadcrumb item into a new position. It signals that the item's placement has changed within the Breadcrumb navigation component and allows you to handle any necessary updates, such as reordering, data changes, or UI feedback.
DdraggingThis event is triggered when a user starts dragging a Breadcrumb item, allowing you to handle custom logic during the drag initiation phase. It provides access to the item being dragged and relevant drag event data.

Methods

AaddItemAdds a new item to the collection. The item is appended to the end of the array or list, increasing the total number of items by one. If additional properties (such as item details or metadata) are required, ensure they are included in the request.
MmaximizeRestores the Breadcrumb component from its minimized or collapsed state to its full, expanded view, making all breadcrumb navigation links visible to the user.
MminimizeCollapses the breadcrumb navigation into a minimal or condensed state, reducing its visual footprint on the page while still maintaining navigational functionality. This is typically used to save space or enhance the user interface on smaller screens.
RremoveItemRemoves a specified item from the collection. If the item exists, it will be deleted; otherwise, no action is taken.

Properties

addNewItemControls the visibility and functionality of the "Add new item" (+) button. When enabled, users can click the button to create and add new items. When disabled, the button is hidden or inactive, preventing the addition of new items.boolean

Controls the visibility and functionality of the "Add new item" (+) button. When enabled, users can click the button to create and add new items. When disabled, the button is hidden or inactive, preventing the addition of new items.

Default value

false

Examples

Markup and runtime examples for addNewItem:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

allowDragControls whether users can drag and reorder breadcrumb items. When enabled, breadcrumb items become draggable, allowing users to change their order within the breadcrumb navigation. When disabled, breadcrumb items remain static and cannot be moved.boolean

Controls whether users can drag and reorder breadcrumb items. When enabled, breadcrumb items become draggable, allowing users to change their order within the breadcrumb navigation. When disabled, breadcrumb items remain static and cannot be moved.

Default value

false

Examples

Markup and runtime examples for allowDrag:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

allowDropAllows you to control whether users can drop dragged breadcrumb items onto the breadcrumb navigation. When enabled, users can rearrange breadcrumb items by dragging and dropping them; when disabled, dropping is prevented.boolean

Allows you to control whether users can drop dragged breadcrumb items onto the breadcrumb navigation. When enabled, users can rearrange breadcrumb items by dragging and dropping them; when disabled, dropping is prevented.

Default value

false

Examples

Markup and runtime examples for allowDrop:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

animationSpecifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Otherwise, this property determines how animations are applied to the element."none" | "simple" | "advanced"

Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Otherwise, this property determines how animations are applied to the element.

Allowed Values

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

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

closeButtonsControls the visibility of the close (remove) button on individual breadcrumb items, allowing users to optionally display or hide the button for removing specific items from the breadcrumb navigation.boolean

Controls the visibility of the close (remove) button on individual breadcrumb items, allowing users to optionally display or hide the button for removing specific items from the breadcrumb navigation.

Default value

false

Examples

Markup and runtime examples for closeButtons:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dataSourceSpecifies the data source used to populate the breadcrumb items. The data should be provided as an array of objects, where each object represents an individual breadcrumb item with its corresponding properties, such as label, link, and any additional attributes required for display or navigation.{label: string, value: string}[]

Specifies the data source used to populate the breadcrumb items. The data should be provided as an array of objects, where each object represents an individual breadcrumb item with its corresponding properties, such as label, link, and any additional attributes required for display or navigation.

Default value

[]

Examples

Markup and runtime examples for dataSource:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

disabledControls whether the Breadcrumb navigation component is disabled. When enabled, the Breadcrumb provides users with a navigational trail;boolean

Controls whether the Breadcrumb navigation component is disabled. When enabled, the Breadcrumb provides users with a navigational trail;

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

itemTemplateDefines the template used to render each breadcrumb item. This property accepts either the ID of an '<template>' element (as a string) or a reference to an actual 'HTMLTemplateElement'. When specified, the template determines the structure and content of each breadcrumb item. If set to 'null', the default rendering is used and no custom template is applied.any

Defines the template used to render each breadcrumb item. This property accepts either the ID of an '<template>' element (as a string) or a reference to an actual 'HTMLTemplateElement'. When specified, the template determines the structure and content of each breadcrumb item. If set to 'null', the default rendering is used and no custom template is applied.

Examples

Markup and runtime examples for itemTemplate:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

localeSets or retrieves the current language code (e.g., "en", "fr", "es") used for localization. This property works together with the messages property to select and display the appropriate translation strings based on the specified language.string

Sets or retrieves the current language code (e.g., "en", "fr", "es") used for localization. This property works together with the messages property to select and display the appropriate translation strings based on the specified language.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

messagesDefines or retrieves an object containing all user-facing text strings within the widget that can be localized. This object allows customization of the widget’s displayed text in different languages and works in conjunction with the locale property to support internationalization and localization. Use this property to provide translations for messages, labels, and other interface text in the widget.object

Defines or retrieves an object containing all user-facing text strings within the widget that can be localized. This object allows customization of the widget’s displayed text in different languages and works in conjunction with the locale property to support internationalization and localization. Use this property to provide translations for messages, labels, and other interface text in the widget.

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."

}

Examples

Markup and runtime examples for messages:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-breadcrumb');
el.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."}};

Read the current value:

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

minimizeWidthSpecifies the minimum width (in pixels) at which the Breadcrumb component transitions from its normal display to a minimized mode. If this value is set to null, the Breadcrumb will always remain in its normal mode and will not automatically minimize, regardless of the container's width.number

Specifies the minimum width (in pixels) at which the Breadcrumb component transitions from its normal display to a minimized mode. If this value is set to null, the Breadcrumb will always remain in its normal mode and will not automatically minimize, regardless of the container's width.

Examples

Markup and runtime examples for minimizeWidth:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

unfocusableWhen set to true, this property prevents the element from receiving keyboard focus or being selected using keyboard navigation (such as with the Tab key). As a result, users will not be able to focus on this element using standard keyboard interactions.boolean

When set to true, this property prevents the element from receiving keyboard focus or being selected using keyboard navigation (such as with the Tab key). As a result, users will not be able to focus on this element using standard keyboard interactions.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

unlockKeySets or retrieves the value of the unlockKey property, a unique key required to unlock and access the product's features. Use this property to specify the unlock key when enabling product access, or to obtain the current unlock key associated with the product.string

Sets or retrieves the value of the unlockKey property, a unique key required to unlock and access the product's features. Use this property to specify the unlock key when enabling product access, or to obtain the current unlock key associated with the product.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-breadcrumb unlock-key=""></smart-breadcrumb>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-breadcrumb');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

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

Events

addNewItemThis event is triggered whenever the user clicks the "Add new item" (+) button. It typically indicates the user's intent to create or insert a new item into the current list, collection, or data structure. The event can be used to initialize the process for adding a new item, display a relevant input form, or handle any additional logic associated with item creation.CustomEvent

This event is triggered whenever the user clicks the "Add new item" (+) button. It typically indicates the user's intent to create or insert a new item into the current list, collection, or data structure. The event can be used to initialize the process for adding a new item, display a relevant input form, or handle any additional logic associated with item creation.

  • 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.

Try a demo showcasing the addNewItem event.

Examples

Listen for addNewItem using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

closeThis event is triggered whenever a breadcrumb item is removed or closed by the user—such as when a close icon within a breadcrumb segment is clicked. It can be used to detect and respond to changes in the breadcrumb navigation, allowing you to update application state, UI elements, or perform cleanup tasks as needed.CustomEvent

This event is triggered whenever a breadcrumb item is removed or closed by the user—such as when a close icon within a breadcrumb segment is clicked. It can be used to detect and respond to changes in the breadcrumb navigation, allowing you to update application state, UI elements, or perform cleanup tasks as needed.

  • 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.

Examples

Listen for close using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

closingThis event is fired just before a Breadcrumb item begins the closing process. You can intercept and prevent the item from closing by invoking event.preventDefault() within your event handler. This allows you to add custom logic, such as displaying a confirmation dialog or validating conditions, before the Breadcrumb item is allowed to close.CustomEvent

This event is fired just before a Breadcrumb item begins the closing process. You can intercept and prevent the item from closing by invoking event.preventDefault() within your event handler. This allows you to add custom logic, such as displaying a confirmation dialog or validating conditions, before the Breadcrumb item is allowed to close.

  • 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.

Examples

Listen for closing using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

dragEndThis event is triggered when a user completes a drag-and-drop operation by dropping a Breadcrumb item into a new position. It signals that the item's placement has changed within the Breadcrumb navigation component and allows you to handle any necessary updates, such as reordering, data changes, or UI feedback.CustomEvent

This event is triggered when a user completes a drag-and-drop operation by dropping a Breadcrumb item into a new position. It signals that the item's placement has changed within the Breadcrumb navigation component and allows you to handle any necessary updates, such as reordering, data changes, or UI feedback.

  • 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.

Try a demo showcasing the dragEnd event.

Examples

Listen for dragEnd using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

draggingThis event is triggered when a user starts dragging a Breadcrumb item, allowing you to handle custom logic during the drag initiation phase. It provides access to the item being dragged and relevant drag event data.CustomEvent

This event is triggered when a user starts dragging a Breadcrumb item, allowing you to handle custom logic during the drag initiation phase. It provides access to the item being dragged and relevant drag event data.

  • 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.

Examples

Listen for dragging using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

Methods

addItem( itemDetails: any): voidAdds a new item to the collection. The item is appended to the end of the array or list, increasing the total number of items by one. If additional properties (such as item details or metadata) are required, ensure they are included in the request.

Adds a new item to the collection. The item is appended to the end of the array or list, increasing the total number of items by one. If additional properties (such as item details or metadata) are required, ensure they are included in the request.

Arguments

itemDetailsany

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

On the custom element in the DOM (narrow the selector, e.g. to #my-breadcrumb, if you host multiple widgets):

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

Try a demo showcasing the addItem method.

maximize(): voidRestores the Breadcrumb component from its minimized or collapsed state to its full, expanded view, making all breadcrumb navigation links visible to the user.

Restores the Breadcrumb component from its minimized or collapsed state to its full, expanded view, making all breadcrumb navigation links visible to the user.

On the custom element in the DOM (narrow the selector, e.g. to #my-breadcrumb, if you host multiple widgets):

document.querySelector('smart-breadcrumb')?.maximize();

minimize(): voidCollapses the breadcrumb navigation into a minimal or condensed state, reducing its visual footprint on the page while still maintaining navigational functionality. This is typically used to save space or enhance the user interface on smaller screens.

Collapses the breadcrumb navigation into a minimal or condensed state, reducing its visual footprint on the page while still maintaining navigational functionality. This is typically used to save space or enhance the user interface on smaller screens.

On the custom element in the DOM (narrow the selector, e.g. to #my-breadcrumb, if you host multiple widgets):

document.querySelector('smart-breadcrumb')?.minimize();

removeItem( item: HTMLElement): voidRemoves a specified item from the collection. If the item exists, it will be deleted; otherwise, no action is taken.

Removes a specified item from the collection. If the item exists, it will be deleted; otherwise, no action is taken.

Arguments

itemHTMLElement

The item to remove.

On the custom element in the DOM (narrow the selector, e.g. to #my-breadcrumb, if you host multiple widgets):

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

Try a demo showcasing the removeItem method.

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