hierarchical-breadcrumb-dropdowns-blazor.md

title	description	type	page_title	slug	tags	res_type	ticketid
Hierarchical Breadcrumb in Blazor	Learn how to customize the Breadcrumb for Blazor by embedding dropdowns within Breadcrumb items to optimize user interaction and functionality.	how-to	Hierarchical Breadcrumb in Blazor	hierarchical-breadcrumb-dropdowns-blazor	breadcrumb, blazor, customization, dropdown, itemtemplate, hierarchical	kb	1652751

Environment

Product

Breadcrumb for Blazor

Description

Adding custom components like dropdowns to Breadcrumb crumbs can improve user interaction.

This KB article answers the following questions:

• Is it possible to achieve a hierarchical structure in the Breadcrumb component?
• Is it possible to embed custom components inside Breadcrumb crumbs?
• How to use the ItemTemplate to add dropdowns to Breadcrumb items?

Solution

To embed dropdowns in the Breadcrumb "crumbs", use an ItemTemplate. This template allows you to customize the Breadcrumb items, and include other components such as dropdowns.

@*The dropdown's appearance is customized to blend with the Breadcrumb by adjusting the border color and preventing text decoration changes on hover.*@

<TelerikBreadcrumb Data="@Items">
    <ItemTemplate>
        @if (context.Items != null && context.Items.Any())
        {
            var values = new List<string> { context.Text }.Concat(context.Items.Select(x => x.Text));
            var value = context.SelectedChildren?.Text ?? context.Text;
            <TelerikDropDownList FillMode="@ThemeConstants.DropDownList.FillMode.Flat" 
                                 Data="@values" 
                                 Class="breadcrumb-ddl"
                                 Value="@value"
                                 ValueChanged="@((string value) => OnValueChanged(context, value))">
                <DropDownListSettings>
                    <DropDownListPopupSettings Height="auto" />
                </DropDownListSettings>
            </TelerikDropDownList>
        }
        else
        {
            <span>@context.Text</span>
        }
    </ItemTemplate>
</TelerikBreadcrumb>

<style>
    .breadcrumb-ddl {
        border-color: transparent !important;
    }

    .k-breadcrumb-link:hover:has(.k-dropdownlist) {
        text-decoration: none;
    }
</style>

@code {
    private IEnumerable<BreadcrumbItem> Items { get; set; } = new List<BreadcrumbItem>();

    private void OnValueChanged(BreadcrumbItem item, string value)
    {
        item.SelectedChildren = item.Items.FirstOrDefault(x => x.Text == value);
    }

    protected override void OnInitialized()
    {
        Items = new List<BreadcrumbItem>
        {
            new BreadcrumbItem { Text = "Telerik UI for Blazor" },
            new BreadcrumbItem { Text = "Components", Items = new List<BreadcrumbItem> { new BreadcrumbItem { Text = "AutoComplete" }, new BreadcrumbItem { Text = "Calendar" }, new BreadcrumbItem { Text = "Grid" } } },
            new BreadcrumbItem { Text = "Templates" },
        };
    }

    public class BreadcrumbItem
    {
        public string Text { get; set; }
        public List<BreadcrumbItem> Items { get; set; }
        public BreadcrumbItem SelectedChildren { get; set; }
    }
}

See Also

• Breadcrumb Templates
• DropDownList Overview