How to Dynamically Add, Delete, or Modify Breadcrumb Items in JavaScript

To dynamically manage breadcrumb items in an application, use the items property of the Breadcrumb component. The following guide shows how to add, delete, and replace breadcrumb items programmatically while ensuring the component is updated correctly.

Initializing the Breadcrumb Component

All item management operations depend on an initialized Breadcrumb instance. The following snippet demonstrates the minimum required setup before performing any dynamic operations:

var breadcrumbObj = new ej.navigations.Breadcrumb({
   items: [
       { text: "Home", url: "/" },
       { text: "Components", url: "/components" }
   ],
});
breadcrumbObj.appendTo('#breadcrumb'); 

Ensure this initialization completes before attaching any button event handlers that manipulate breadcrumbObj.items.

Steps to Manage Breadcrumb Items Dynamically

1. Adding a New Breadcrumb Item

The following handler creates a new BreadcrumbItem object and appends it to the existing items array. A duplicate check ensures the item is added only when it is not already present. After modifying the array, activeItem is updated to the last item’s text value and dataBind() is called to reflect the change in the rendered component.

new ej.buttons.Button({ cssClass: 'e-small' }, '#addItem').element.onclick = function() {
    var newItem = { 
        text: "All Components",
        url: "https://ej2.syncfusion.com/javascript/demos/#/material/grid/grid-overview",
    };
    if (!breadcrumbObj.items.find(e => e.text == 'All Components')) {
        breadcrumbObj.items.push(newItem);
        breadcrumbObj.activeItem = breadcrumbObj.items[breadcrumbObj.items.length - 1].text;
        breadcrumbObj.dataBind();
    }
};

2. Deleting a Breadcrumb Item

The following handler removes the last item from the items array using splice. The guard condition breadcrumbObj.items.length > 1 prevents the breadcrumb from being left in an empty state, which would cause the component to render without any navigation context. After removal, activeItem is reassigned to the new last item’s text value, or set to null if no items remain.

new ej.buttons.Button({ cssClass: 'e-small' }, '#deleteItem').element.onclick = function() {
    if (breadcrumbObj.items.length > 1) {
        breadcrumbObj.items.splice(breadcrumbObj.items.length - 1, 1);
        // Safely set the active item if items remain
        if (breadcrumbObj.items.length > 0) {
            breadcrumbObj.activeItem = breadcrumbObj.items[breadcrumbObj.items.length - 1].text;
        } else {
            breadcrumbObj.activeItem = null;
        }
        breadcrumbObj.dataBind();
    }
};

3. Modifying Breadcrumb Items

The following handler replaces the entire items array with a new set of BreadcrumbItem objects defined in the newItems variable. This approach is used when the navigation context changes entirely — for example, when switching between application modules. After the assignment, activeItem is explicitly set to the last item’s text value and dataBind() is called to synchronize the component.

new ej.buttons.Button({ cssClass: 'e-small' }, '#change').element.onclick = function() {
    // Define the new items array before assigning it
    var newItems = [
        { text: "Home", url: "/" },
        { text: "Components", url: "/components" },
        { text: "Grid", url: "/components/grid" }
    ];
    breadcrumbObj.items = newItems;
    // Optionally update the active item explicitly
    breadcrumbObj.activeItem = breadcrumbObj.items[breadcrumbObj.items.length - 1].text;
    breadcrumbObj.dataBind();
};

Implementation Notes

• Initialize the Breadcrumb component using new ej.navigations.Breadcrumb({...}) and call appendTo() on the target element before attaching any item management handlers. Refer to the Breadcrumb Getting Started guide for full setup instructions.
• The activeItem property accepts the exact text string of the target item and is case-sensitive. Set it to null when no item should be marked as active.

Sample

A working demonstration is available in the Stackblitz sample

Preview