New to Kendo UI for Angular? Start a free 30-day trial

Edit Breadcrumb Items


ProductProgress® Kendo UI® for Angular Breadcrumb


How to edit and update the Breadcrumb items?


The Breadcrumb can be transformed into a textbox and let the user update its content dynamically.

  1. Create a custom edit button and handle its click event. When the button is clicked replace the Breadcrumb with TextBox component:

        *ngTemplateOutlet="editing ? editTmpl : breadcrumbTmpl"
    <ng-template #breadcrumbTmpl>
        <kendo-breadcrumb [items]="items"></kendo-breadcrumb>
        <button kendoButton (click)="startEditing()"...></button>
    <ng-template #editTmpl>
        <kendo-textbox ... ><kendo-textbox>
    public editing = false;
    public startEditing(): void {
      this.editing = true;
  2. Handle the valueChange event of the TextBox component and update the items collection of the Breadcrumb component.

  3. You can further handle the blur event of the TextBox, Esc or Enter keydown events to exit the editing mode:

    <kendo-textbox (blur)="blur()" (keydown.enter)="confirmEdit($event)" (keydown.esc)="cancelEdit($event)" ...></kendo-textbox>
    public confirmEdit(ev: KeyboardEvent): void {
      this.editing = false;
    public cancelEdit(ev: KeyboardEvent): void {
      this.editing = false;

The following example demonstrates the implementation of the suggested approach.

View Source
Change Theme:

In this article

Not finding the help you need?