Hierarchical Breadcrumb in Blazor
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; }
}
}