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

Breadcrumb Separator

The Breadcrumb component renders a Telerik font icon as a separator between its items. By default the separator icon is chevron-right.

You can define a separator icon of your choice through the SeparatorIcon attribute of the TelerikBreadcrumb. It accepts a string with the Telerik icon name.

Furthermore, you can take full control over the Separator rendering with the SeparatorTemplate the Breadcrumb component provides.

Change the default Breadcrumb Separator. The result from the snippet below.

Breadcrumb Separator Icon

@* This example demonstrates how to change the default Telerik icon used as a Breadcrumb Separator*@

<TelerikBreadcrumb SeparatorIcon="caret-double-alt-right"
                   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"}
        };
    }

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

See Also

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