New to Telerik UI for Blazor? Download free 30-day trial

Breadcrumb Data Binding

This article explains how to provide data to a Breadcrumb component, the properties related to data binding and their effect.

For details on Value Binding and Data Binding, and the differences between them, see the Value Binding vs Data Binding article.

This article has the following sections:

In some cases you might prefer to dynamically generate the Breadcrumb items based on the current application Url. Read more how to achieve that in the Navigation article.

The Breadcrumb items provide the following features that you control through the corresponding fields in their data binding:

  • Text - the text that will be shown on the item.
  • Title - the text that will be added to the title attribute of the html element.
  • Icon - The Telerik Font or SVG icon that will be rendered in the item. Read more in the Icons article.
  • Url - the view the item will navigate to by generating a link.
  • Disabled - you can disable items by setting this field to true. Such items will keep rendering but will not be clickable.
  • Class - the CSS class that will be rendered on the main wrapping container of the item. You can use it to apply the desired styles to the separate Breadcrumb items.

Data Bindings

The properties of a Breadcrumb item map directly to fields from the Breadcrumb model. You define that relationship by providing the names of the fields where the corresponding information is present. To do this, use the properties in the main TelerikBreadcrumb tag:

  • TextField => Text
  • TitleField => Title
  • IconField => Icon
  • UrlField => Url
  • DisabledField => Disabled
  • ClassField => Class

There are default values for the field names. If your model names match the defaults, you don't have to define them in the bindings settings.

If your model field names match any of the default names, the component will try to use them. For example, a field called Icon will try to produce a Telerik icon out of those values and that may not be what you want. If you want to override such behaviors, you can set IconField="someNonExistingField". You can read more about this here. This also applies to other fields too. Another example would be a field called Url - in case you want to perform navigation yourself through templates, you may want to set UrlField="someFakeField" so that the component does not navigate on its own.

Default field names for Breadcrumb item bindings. If you use these, you don't have to specify them in the TelerikBreadcrumb tag explicitly.

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

Example - Data Binding to Non-Default Field Names

@*This example shows how you can data bind the Breadcrumb and set the field names it will use from the model*@

<TelerikBreadcrumb Data="@Items"
                   TextField="ItemText"
                   UrlField="ItemUrl"
                   DisabledField="ItemDisabled">
</TelerikBreadcrumb>

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

    protected override void OnInitialized()
    {
        Items = new List<BreadcrumbItem>
        {
            new BreadcrumbItem
            {
                ItemText = "Overview",
                ItemUrl = "https://demos.telerik.com/blazor-ui/breadcrumb/overview"
            },
            new BreadcrumbItem
            { ItemText = "Navigation",
                ItemUrl = "https://demos.telerik.com/blazor-ui/breadcrumb/navigation",
            },
            new BreadcrumbItem
            { ItemText = "Items",
                ItemUrl = "https://demos.telerik.com/blazor-ui/breadcrumb/items",
                ItemDisabled = true
            },
            new BreadcrumbItem
            {
                ItemText = "Collapse Modes",
                ItemUrl = "https://demos.telerik.com/blazor-ui/breadcrumb/collapse-modes"
            }
        };
    }

    public class BreadcrumbItem
    {
        public string ItemText { get; set; }
        public string ItemUrl { get; set; }
        public bool ItemDisabled { get; set; }
    }
}

See Also

In this article