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>
telerik · Jul 16, 2024 · d8d3e66 · d8d3e66
1 parent 9b7d65d
commit d8d3e66
Showing 1 changed file with 102 additions and 0 deletions.
diff --git a/knowledge-base/hierarchical-breadcrumb-dropdowns-blazor.md b/knowledge-base/hierarchical-breadcrumb-dropdowns-blazor.md
@@ -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)