-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added new kb article hierarchical-breadcrumb-dropdowns-blazor (#2215)
* Added new kb article hierarchical-breadcrumb-dropdowns-blazor * kb(breacrumb): address comments --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: Hristian Stefanov <Hristian.Stefanov@progress.com>
- Loading branch information
1 parent
8979900
commit 3067c12
Showing
1 changed file
with
102 additions
and
0 deletions.
There are no files selected for viewing
102 changes: 102 additions & 0 deletions
102
knowledge-base/hierarchical-breadcrumb-dropdowns-blazor.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
--- | ||
title: Hierarchical Breadcrumb in Blazor | ||
description: Learn how to customize the Breadcrumb for Blazor by embedding dropdowns within Breadcrumb items to optimize user interaction and functionality. | ||
type: how-to | ||
page_title: Hierarchical Breadcrumb in Blazor | ||
slug: hierarchical-breadcrumb-dropdowns-blazor | ||
tags: breadcrumb, blazor, customization, dropdown, itemtemplate, hierarchical | ||
res_type: kb | ||
ticketid: 1652751 | ||
--- | ||
|
||
## Environment | ||
|
||
<table> | ||
<tbody> | ||
<tr> | ||
<td>Product</td> | ||
<td>Breadcrumb for Blazor</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
|
||
## 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`]({%slug breadcrumb-templates%}#itemtemplate). This template allows you to customize the Breadcrumb items, and include other components such as dropdowns. | ||
|
||
````CSHTML | ||
@*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](https://docs.telerik.com/blazor-ui/components/breadcrumb/templates#itemtemplate) | ||
* [DropDownList Overview](https://docs.telerik.com/blazor-ui/components/dropdownlist/overview) |