BreadCrumbComponent

Represents the Kendo UI Breadcrumb component for Angular.

ts

@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

Name	Type	Default	Description
collapseMode	BreadCrumbCollapseMode		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	any[]		The collection of items that will be rendered in the Breadcrumb.
separatorIcon	string		Defines a name of a built-in icon in a Kendo UI theme.
separatorSVGIcon	SVGIcon		Defines an SVGIcon to be rendered as a separator.
size	BreadcrumbSize		Specifies the padding of all Breadcrumb elements. The possible values are: small medium (default) large none

Events

Name	Type	Description
itemClick	EventEmitter<BreadCrumbItem>	Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.