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/images, and respond to events.

Telerik UI for Blazor Ninja image

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

In this article:

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.

Breadcrumb for Blazor

@* 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 = "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 string 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 string 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.

  • 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

In this article
Not finding the help you need? Improve this article