BreadCrumbComponent

Represents the Kendo UI Breadcrumb component for Angular.

Copy Code@Component({
     selector: 'my-app',
     template: `
         <kendo-breadcrumb
             [items]="items"
             (itemClick)="onItemClick($event)">
         </kendo-breadcrumb>
     `
})
class AppComponent {
     public items: BreadCrumbItem[] = [
         { text: 'Home', title: 'Home', icon: 'home' },
         { text: 'Kids', title: 'Kids' },
         { text: '8y-16y', title: '8y-16y', disabled: true },
         { text: 'New collection', title: 'New collection' },
         { text: 'Jeans', title: 'Jeans' }
     ];

     public onItemClick(item: BreadCrumbItem): void {
         console.log(item);
     }
}

Selector

kendo-breadcrumb

Export Name

Accessible in templates as #kendoBreadCrumbInstance="kendoBreadCrumb"

Inputs

separatorIcon

Defines a name of a built-in icon in a Kendo UI theme.

collapseMode

Specifies the collapse mode of the Breadcrumb (see example).

The possible values are:

• auto (default)—items are automatically collapsed based on the width of the Breadcrumb.
• wrap—items are wrapped on multiple rows.
• none—all items are expanded on the same row.

For more information and example refer to the Collapse Modes article.

items

The collection of items that will be rendered in the Breadcrumb.

Events

itemClick

Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.