Events
The Breadcrumb exposes Click() and Change() events that you can handle to customize the functions of the component.
For a complete example on basic Breadcrumb events, refer to the demo on using the events of the Breadcrumb.
@(Html.Kendo().Breadcrumb()
.Name("breadcrumb")
.Events(e =>
e.Click("onClick")
.Change("onChange"))
.Items(items =>
{
items.Add()
.Type(BreadcrumbItemType.RootItem)
.Href("https://demos.telerik.com/aspnet-core/")
.Text("All Components")
.ShowText(true)
.Icon("home")
.ShowIcon(true);
items.Add()
.Type(BreadcrumbItemType.Item)
.Href("/breadcrumb")
.Text("Breadcrumb")
.ShowText(true);
items.Add()
.Type(BreadcrumbItemType.Item)
.Href("/events")
.Text("Events")
.ShowText(true);
})
)
<script>
function onClick(e) {
console.log("Clicked. :: target: " + e.item.text + ". Type :: " + e.item.type);
}
function onChange(e) {
console.log("Changed. New Value :: " + e.value);
}
</script>
<kendo-breadcrumb name="breadcrumb"
on-change="onChange"
on-click="onClick">
<kendo-breadcrumb-items>
<kendo-breadcrumb-item type="BreadcrumbItemType.RootItem" text="All Components" href="https://demos.telerik.com/kendo-ui/" show-text="true" icon="home" show-icon="true"></kendo-breadcrumb-item>
<kendo-breadcrumb-item type="BreadcrumbItemType.Item" text="Breadcrumb" href="/breadcrumb"></kendo-breadcrumb-item>
<kendo-breadcrumb-item type="BreadcrumbItemType.Item" text="Tag Helper" href="/tag-helper"></kendo-breadcrumb-item>
</kendo-breadcrumb-items>
</kendo-breadcrumb>
<script>
function onClick(e) {
kendoConsole.log("Clicked. :: target: " + e.item.text + ". Type :: " + e.item.type);
}
function onChange(e) {
kendoConsole.log("Changed. New Value :: " + e.value);
}
</script>