Breadcrumb Overview

The Breadcrumb is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

The Telerik UI Breadcrumb TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Breadcrumb widget.

The Breadcrumb is an intuitive UI component that allows navigation within a folder structure or web page. It helps the user to understand the hierarchy and provides an easy way to go back one or several steps.

• Demo page for the Breadcrumb HtmlHelper

• Demo page for the Breadcrumb TagHelper

Initializing the Breadcrumb

The following example demonstrates how to define the Breadcrumb.

    @(Html.Kendo().Breadcrumb()
        .Name("breadcrumb")
    )

    <kendo-breadcrumb name="breadcrumb"></kendo-breadcrumb>

Basic Configuration

The following example demonstrates the basic configuration for the Breadcrumb.

    @(Html.Kendo().Breadcrumb()
        .Name("breadcrumb")
        .Items(items =>
        {
            items.Add()
                .Type(BreadcrumbItemType.RootItem)
                .Href("https://demos.telerik.com/kendo-ui/")
                .Text("All Components")
                .Icon("home")
                .ShowIcon(true);
            items.Add()
                .Type(BreadcrumbItemType.Item)
                .Href("/breadcrumb")
                .Text("Breadcrumb")
                .ShowText(true);
            items.Add()
                .Type(BreadcrumbItemType.Item)
                .Href("/index")
                .Text("Basic Usage")
                .ShowText(true);
        })
    )

    <script>
    $(function() {
        // The Name() of the Breadcrumb is used to get its client-side instance.
        var breadcrumb = $("#breadcrumb").data("kendoBreadcrumb");
    });
    </script>

    <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

• Icons—You can configure the icons of the items and the delimiter that separates them.
• Items—The items configuration allows you to take full control over the Breadcrumb items by setting their icons, text content, and other attributes.
• Editing—You can allow the users to edit the paths that the Breadcrumb sets.
• Navigation—By using the Navigational configuration, you can enable automatic navigation.
• Accessibility—The Breadcrumb is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.

Next Steps

• Getting Started with the Breadcrumb

• Basic Usage of the Breadcrumb HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the Breadcrumb Tag Helper for ASP.NET Core (Demo)

See Also

• Using the API of the Breadcrumb HtmlHelper for ASP.NET Core (Demo)
• Knowledge Base Section