Breadcrumb Tag Helper Overview
The Telerik UI Breadcrumb tag helper for ASP.NET Core is a server-side wrapper for the Kendo UI Breadcrumb widget.
The Breadcrumb is an intuitive UI component that allows navigation within a folder structure or web page. It provides an easy way to navigate backwards by one or multiple steps.
The Breadcrumb is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the Breadcrumb
The following example demonstrates how to define the Breadcrumb by using the Breadcrumb tag helpers.
<kendo-breadcrumb name="breadcrumb"></kendo-breadcrumb>
Basic Configuration
The following example demonstrates the basic configuration for the Breadcrumb tag helper.
<kendo-breadcrumb name="breadcrumb">
<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-items>
<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>
Functionality and Features
Events
You can subscribe to all Breadcrumb events.
<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-items>
<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>