New to Telerik UI for ASP.NET Core? Download free 30-day trial

Razor Page

This article describes how to configure the Telerik UI Breadcrumb for ASP.NET Core in a RazorPage scenario.

For the full project with RazorPages examples, visit our GitHub repository.

    @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
    @Html.AntiForgeryToken()


    @(Html.Kendo().Breadcrumb()
        .Name("breadcrumb")
        .Items(items =>
        {

            foreach(var item in Model.Items)
            {
                items.Add()
                 .Type(item.IsRoot == true ? BreadcrumbItemType.RootItem : BreadcrumbItemType.Item)
                 .Href(item.Href)
                 .Text(item.Text)
                 .Icon(item.Icon)
                 .ShowText(true);
            }                   

        })
        .Editable(true)
    )


    public List<BreadcrumbItem> Items { get; set; }

    public void OnGet()
    {
        Items = new List<BreadcrumbItem>()
        {
            new BreadcrumbItem(){ Text = "All components", Href = "https://demos.telerik.com/aspnet-core/", Icon = "home", IsRoot = true},
            new BreadcrumbItem(){ Text = "Breadcrumb", Href = "/breadcrumb", Icon= "globe", IsRoot = false },
            new BreadcrumbItem(){ Text = "Icons", Href = "/icons", Icon="globe", IsRoot = false},
        };
    }

    public class BreadcrumbItem
    {
        public string Href { get; set; }
        public string Text { get; set; }
        public string Icon { get; set; }
        public bool IsRoot { get; set; }
    }

See Also

In this article