@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

Name	Type	Description
separatorIcon	`string`	Defines a name of a built-in icon in a Kendo UI theme.
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.

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.

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.

BreadCrumbComponent

Selector

Export Name

Inputs

separatorIcon

collapseMode

items

Events

itemClick

In this article

Not finding the help you need?

Getting Started

Support Resources

Community