Blazor Breadcrumb Overview

The Blazor Breadcrumb component allows navigation within a folder structure or web page. It provides an easy way to navigate backwards by one or multiple steps. In addition to built-in navigation capabilities, you can browse through the items, define templates for the individual nodes, render text and icons, and respond to events.

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

Download Free Trial

In this article:

• Basics
• Features

Basics

To use a Telerik Breadcrumb for Blazor:

1. add the TelerikBreadcrumb tag
2. provide a collection of objects to its Data property (read more in the Data Binding article)
3. match the fields in the model with the binding schema for the nodes
   • In this example, we keep it simple by only providing text for the Breadcrumb items. See the Navigation article for more details on how to use the Breadcrumb for navigating through items.

Basic Breadcrumb with data binding. The result from the snippet below.

@* This example demonstrates the basic configuration of the Breadcrumb*@

<TelerikBreadcrumb Data="@Items">
</TelerikBreadcrumb>

@code {

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

    protected override void OnInitialized()
    {
        Items = new List<BreadcrumbItem>
        {
            new BreadcrumbItem { Text = "Home", Icon = SvgIcon.Home },
            new BreadcrumbItem { Text = "Products"},
            new BreadcrumbItem { Text = "Computer peripherals"},
            new BreadcrumbItem { Text = "Keyboards"},
            new BreadcrumbItem { Text = "Gaming keyboards"}
        };
    }

    public class BreadcrumbItem
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
        public string Url { get; set; }
    } 
}

Component namespace and reference

<TelerikBreadcrumb @ref="theBreadcrumbRef" Data="@Items">
</TelerikBreadcrumb>

@code{
    Telerik.Blazor.Components.TelerikBreadcrumb<BreadcrumbItem> theBreadcrumbRef { get; set; }

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

    protected override void OnInitialized()
    {
        Items = new List<BreadcrumbItem>
        {
        new BreadcrumbItem { Text = "Item1"},
        new BreadcrumbItem { Text = "Item2"},
        new BreadcrumbItem { Text = "Item3"}
        };
    }

    public class BreadcrumbItem
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
        public string Url { get; set; }
    }
}

Features

The Breadcrumb provides the following features:

• Data—a collection of flat data for all items in the Breadcrumb. See the Data Binding article for details.

• CollapseMode—specifies how the Breadcrumb items are displayed if they cannot fit on a single line. Read more in the Collapse Modes article.

• Width—the width of the Breadcrumb component.

• Height—the height of the Breadcrumb component.

• Size—the size of the Breadcrumb component. You can set it to a member of the Telerik.Blazor.ThemeConstants.Breadcrumb.Size class. The default value is Medium.

• Class—the CSS class that will be rendered on the main wrapping element of the Breadcrumb.

• ItemTemplate—define a custom template for the Items of the Breadcrumb. Read more in the Templates article.

• SeparatorTemplate—define a custom template for the Breadcrumb Separator. Read more in the Templates article.

• Events—you can respond to user actions to implement your business logic. For more details see the Events article.

See Also

• Live Demo: Breadcrumb Overview
• BreadCrumb API Reference