From 0b832747ee0faa1e197b184889a80b1716f9a9cf Mon Sep 17 00:00:00 2001 From: praveensf4999 Date: Tue, 23 Sep 2025 18:46:07 +0530 Subject: [PATCH 1/5] 983366: Updated the UG document for Breadcrumb --- blazor/breadcrumb/accessibility.md | 10 +++--- blazor/breadcrumb/breadcrumb-items.md | 21 +++++++------ .../getting-started-with-web-app.md | 24 +++++++------- blazor/breadcrumb/getting-started.md | 14 ++++----- blazor/breadcrumb/icons.md | 31 ++++++++++--------- blazor/breadcrumb/navigation.md | 26 ++++++++++------ blazor/breadcrumb/overflow.md | 26 ++++++++-------- blazor/breadcrumb/style-and-appearance.md | 16 ++++++---- blazor/breadcrumb/templates.md | 26 +++++++++------- 9 files changed, 104 insertions(+), 90 deletions(-) diff --git a/blazor/breadcrumb/accessibility.md b/blazor/breadcrumb/accessibility.md index 10f2551b4d..270abf8f39 100644 --- a/blazor/breadcrumb/accessibility.md +++ b/blazor/breadcrumb/accessibility.md @@ -38,16 +38,16 @@ The accessibility compliance for the Blazor Breadcrumb component is outlined bel ## WAI-ARIA attributes -The Blazor Breadcrumb component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Breadcrumb component: +The Blazor Breadcrumb component implements [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) patterns to meet accessibility requirements. The following ARIA attributes are used in the Blazor Breadcrumb component: | Attributes | Purpose | | --- | --- | | `aria-label` | Indicates the breadcrumb item text. | -| `aria-disabled` | Indicates the state of breadcrumb item whether it is disabled. | +| `aria-disabled` | Indicates the disabled state of a breadcrumb item. | ## Keyboard interaction -The Blazor Breadcrumb component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Breadcrumb component. +The Blazor Breadcrumb component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/#keyboardinteraction) guideline, facilitating navigation for individuals who use assistive technologies (AT) and those who rely solely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Breadcrumb component. | Windows | Mac | Actions | | --- | --- | --- | @@ -58,9 +58,9 @@ The Blazor Breadcrumb component followed the [keyboard interaction](https://www. ## Ensuring accessibility -The Blazor Breadcrumb component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The accessibility levels of the Blazor Breadcrumb component are ensured through automated testing using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. -The accessibility compliance of the Blazor Breadcrumb component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/breadcrumb) in a new window to evaluate the accessibility of the Blazor Breadcrumb component with accessibility tools. +The accessibility compliance of the Blazor Breadcrumb component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/breadcrumb) in a new window to evaluate the accessibility of the Blazor Breadcrumb component with accessibility tools. {% previewsample "https://ej2.syncfusion.com/accessibility/breadcrumb.html" %} diff --git a/blazor/breadcrumb/breadcrumb-items.md b/blazor/breadcrumb/breadcrumb-items.md index 69bfd7846c..396e9fb8b6 100644 --- a/blazor/breadcrumb/breadcrumb-items.md +++ b/blazor/breadcrumb/breadcrumb-items.md @@ -1,6 +1,6 @@ --- layout: post -title: Breadcrumb Items with Blazor Breadcrumb component | Syncfusion +title: Breadcrumb Items in Blazor Breadcrumb component | Syncfusion description: Checkout and learn here all about data binding with Blazor Breadcrumb component of Syncfusion and more. platform: Blazor control: Breadcrumb @@ -9,15 +9,15 @@ documentation: ug # Breadcrumb Items in Blazor Breadcrumb Component -The [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) supports to generate items based on the current URL by default. You can set the [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) tag directive or [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_Url) property to generate the items. +The Syncfusion [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) supports to generate items based on the current URL by default. You can set the [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) tag directive or [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_Url) property to generate the items. [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) has the following properties for navigation and its customizations. -* [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_Url) - Sets the URL of the Breadcrumb item and it will navigate when clicked. +* [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_Url) - Sets the URL of the Breadcrumb item, which is used for navigation when the item is clicked. This can be an absolute or relative URL. -* [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) - Sets CSS class string to include an icon for the Breadcrumb item. +* [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) - Assigns a CSS class string to include an icon next to the breadcrumb item's text. -* [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_Text) - Sets the text content of the Breadcrumb item. +* [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_Text) - Specifies the display text content for the breadcrumb item. ```cshtml @using Syncfusion.Blazor.Navigations @@ -37,14 +37,15 @@ The [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-brea ## Items based on current URL -The Breadcrumb items can be generated based on the current URL of the page when the user does not specify the Breadcrumb items using the [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) tag directive. The following example shows the Breadcrumb items that are auto generated based on the current URL. +The Breadcrumb component can automatically generate its items based on the segments of the current page's URL. This provides a convenient way to create dynamic breadcrumbs without manual item definition. When the `SfBreadcrumb` is instantiated without any [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) directives, it inspects the current URL and generates breadcrumb items accordingly. Each segment of the URL becomes a breadcrumb item, and the text is typically derived from the URL segment ```cshtml @using Syncfusion.Blazor.Navigations + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhUWVWJzVObSwiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-current-url.png) @@ -52,7 +53,7 @@ N> This output screenshot shows the [Bind to Location](https://blazor.syncfusion ## Absolute URL -You can generate the Breadcrumb items by providing the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_Url) property in the component as like the below example. +The Breadcrumb component can also be instructed to generate its items by parsing a specific URL provided via the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_Url) property property of the `` component as like the below example. ```cshtml @using Syncfusion.Blazor.Navigations @@ -66,7 +67,7 @@ You can generate the Breadcrumb items by providing the [Url](https://help.syncfu ## Add or remove the Breadcrumb items -Using the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_Items) property of Breadcrumb, we can dynamically add or remove the items of Breadcrumb. +The Breadcrumb component allows programmatic manipulation of its items using the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_Items) property of Breadcrumb, so items in the breadcrumb can be dynamically add or remove from the Breadcrumb. ```cshtml @using Syncfusion.Blazor.Navigations @@ -106,4 +107,4 @@ Using the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Naviga } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBStMNFgGHPMWew?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVSjuVgKFaADUnm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md index 5a39572e75..f8d1670345 100644 --- a/blazor/breadcrumb/getting-started-with-web-app.md +++ b/blazor/breadcrumb/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Breadcrumb in Blazor Web App -This section briefly explains about how to include [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This guide provides a step-by-step walkthrough for integrating the Syncfusion [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -23,15 +23,15 @@ This section briefly explains about how to include [Blazor Breadcrumb](https://w You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +During project creation, be sure to configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App To add **Blazor Breadcrumb** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If your Blazor Web App uses the `WebAssembly or Auto` render modes, ensure these NuGet packages are installed in the client project -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, you can use the Package Manager Console: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages. {% endtabcontent %} @@ -56,7 +56,7 @@ N> Syncfusion® Blazor components are availa You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Remember to configure the [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,11 +70,11 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more details on creating a **Blazor Web App** with different interactive modes, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If your app uses the `WebAssembly` or `Auto` render modes, install the NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages. {% endtabcontent %} @@ -118,7 +118,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both `server` and `client` **~/Program.cs** files of your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +Reference the theme stylesheet and script, which are available from the NuGet package via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: ```html @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Breadcrumb compo | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. In this case, it does not need to be specified in individual page components. {% tabs %} {% highlight razor %} diff --git a/blazor/breadcrumb/getting-started.md b/blazor/breadcrumb/getting-started.md index b330a59ae4..28caaabbd4 100644 --- a/blazor/breadcrumb/getting-started.md +++ b/blazor/breadcrumb/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Breadcrumb Component -This section briefly explains about how to include [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. To get started quickly with Blazor Breadcrumb component, check on the following video: @@ -26,7 +26,7 @@ To get started quickly with Blazor Breadcrumb component, check on the following ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for a detailed list of available packages. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal(Ctrl+`). {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for a detailed list of available packages. {% endtabcontent %} @@ -197,4 +197,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- * [Getting Started with Syncfusion® Blazor for server side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for server side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor Breadcrumb example](https://blazor.syncfusion.com/demos/breadcrumb/default-functionalities?theme=bootstrap5) that shows you how to render and configure the breadcrumb. +N> Explore our [Blazor Breadcrumb example](https://blazor.syncfusion.com/demos/breadcrumb/default-functionalities?theme=bootstrap5) that shows you how to render and configure the breadcrumb. diff --git a/blazor/breadcrumb/icons.md b/blazor/breadcrumb/icons.md index 684a465673..0bccc94488 100644 --- a/blazor/breadcrumb/icons.md +++ b/blazor/breadcrumb/icons.md @@ -9,11 +9,11 @@ documentation: ug # Icons in Blazor Breadcrumb Component -The [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component contains an icon, image, and SVG to provide a visual representation of an item. +The [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component supports the inclusion of icons, images, and SVG elements to enhance the visual representation of its items. These visual cues improve navigation clarity and user experience. ## Breadcrumb with font icon -To place the font icon on the Breadcrumb item, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property to `e-icons` with the required icon's class name. +To display a font icon on a Breadcrumb item, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property to `e-icons` with the required icon's class name. ```cshtml @using Syncfusion.Blazor.Navigations @@ -29,13 +29,13 @@ To place the font icon on the Breadcrumb item, set the [IconCss](https://help.sy ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgWLMTfUsCSUjG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png) +![Blazor Breadcrumb with Font Icons](./images/blazor-Breadcrumb-items.png) -N> By default, the icon is positioned to the left side of the item. +N> By default, icons are positioned to the left side of the item text. ## Breadcrumb with image -In the Breadcrumb component, you can add images to the items using [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property. In the following example, an image is added to the Breadcrumb item with height and width by using `e-image-home` class. +You can incorporate images into Breadcrumb items by utilizing the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property. In the following example, an image is added to the Breadcrumb item with height and width by using `e-image-home` CSS class. ```cshtml @using Syncfusion.Blazor.Navigations @@ -59,11 +59,11 @@ In the Breadcrumb component, you can add images to the items using [IconCss](htt ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgsLMppKsTBQHd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/image.png) +![Blazor Breadcrumb with Image](./images/image.png) -## Breadcrumb with SVG image +## Breadcrumb with SVG Image -In the Breadcrumb component, SVG image can be added for the items using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property. In the following example, SVG image is added to the Breadcrumb item with height and width by using `e-svg-home` class. +To add an SVG image to a Breadcrumb item, use the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property with a custom CSS class. In the following example, SVG image is added to the Breadcrumb item with height and width by using `e-svg-home` class. ```cshtml @using Syncfusion.Blazor.Navigations @@ -87,13 +87,13 @@ In the Breadcrumb component, SVG image can be added for the items using the [Ico ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BDrgsLCJfAixuNYA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Breadcrumb Sample](./images/svg.PNG) +![Breadcrumb with SVG Image](./images/svg.PNG) -## Icon only +## Icon Only -Use [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property to display icon for an item. +To display Breadcrumb items consisting solely of icons, provide the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property for each `BreadcrumbItem` without specifying the `Text` property. -In the following example, Breadcrumb items are demonstrated with only icons by providing the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property. +The following example demonstrates Breadcrumb items rendered only with icons: ```cshtml @using Syncfusion.Blazor.Navigations @@ -108,11 +108,12 @@ In the following example, Breadcrumb items are demonstrated with only icons by p ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BNrgWrWTTqsOeruV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Breadcrumb Sample](./images/icon-only.PNG) +![Breadcrumb with Icons Only](./images/icon-only.PNG) ## Show icon only for first item +To display an icon exclusively for the first item in the Breadcrumb, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property for the first `BreadcrumbItem` and omit it for subsequent items. -To show icon only for the first item in the Breadcrumb component, add icons to the first item using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property. In the following example, the icon is provided only for the first item by setting the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_IconCss) property. +The following example demonstrates an icon only for the initial Breadcrumb item: ```cshtml @using Syncfusion.Blazor.Navigations @@ -128,4 +129,4 @@ To show icon only for the first item in the Breadcrumb component, add icons to t ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LXLgChsTfKrhKYox?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png) \ No newline at end of file +![Blazor Breadcrumb with First Item Icon Only](./images/blazor-Breadcrumb-items.png) \ No newline at end of file diff --git a/blazor/breadcrumb/navigation.md b/blazor/breadcrumb/navigation.md index e33de13812..2c576f2865 100644 --- a/blazor/breadcrumb/navigation.md +++ b/blazor/breadcrumb/navigation.md @@ -1,6 +1,6 @@ --- layout: post -title: Navigation with Blazor Breadcrumb component | Syncfusion +title: Navigation in Blazor Breadcrumb component | Syncfusion description: Checkout and learn here all about Navigation with Blazor Breadcrumb component of Syncfusion and more. platform: Blazor control: Breadcrumb @@ -9,11 +9,13 @@ documentation: ug # Navigation in Blazor Breadcrumb Component -By default, [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) items support navigation for relative or absolute URL. You can handle the custom navigation by setting [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_EnableNavigation) property as `false`. +By default, [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) items support navigation using both relative and absolute URLs. You can also implement custom navigation logic by setting the [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_EnableNavigation) property to `false`. ## Relative URL -You can specify relative URL in the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_Url) property of the [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html). In the following example, the items contains the relative URL. +Relative URLs can be specified using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_Url) property of a [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html). This allows navigation within the same application or website structure. + +The following example demonstrates Breadcrumb items configured with relative URLs: ```cshtml @using Syncfusion.Blazor.Navigations @@ -31,11 +33,13 @@ You can specify relative URL in the [Url](https://help.syncfusion.com/cr/blazor/ ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUCBsJJKhvVXTj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-relative-url.png) +![Blazor Breadcrumb with Relative URLs](./images/blazor-Breadcrumb-relative-url.png) + +## Absolute URLs -## Absolute URL +Absolute URLs can be specified using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_Url) property of a [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html). This enables navigation to external websites or specific, full paths within an application. -You can specify absolute URL in the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html#Syncfusion_Blazor_Navigations_BreadcrumbItem_Url) property of the [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html). In the following example, the items contains the absolute URL. +The following example demonstrates Breadcrumb items configured with absolute URLs: ```cshtml @using Syncfusion.Blazor.Navigations @@ -52,11 +56,13 @@ You can specify absolute URL in the [Url](https://help.syncfusion.com/cr/blazor/ ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VXhKsrifpggirdDv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-absolute-url.png) +![Blazor Breadcrumb with Absolute URLs](./images/blazor-Breadcrumb-absolute-url.png) + +## Enable Navigation for the Last Breadcrumb Item -## Enable navigation for last Breadcrumb item +By default, the last item in a breadcrumb trail represents the current page and is generally not navigable. However, you can enable navigation for the last Breadcrumb item by setting the[EnableActiveItemNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_EnableActiveItemNavigation) property to `true`. This can be useful in specific scenarios where the "current page" link should also be clickable. -Breadcrumb enables the navigation for the last item by setting the [EnableActiveItemNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_EnableActiveItemNavigation) property as `true`. In the following example, the navigation is enabled for last Breadcrumb item. +The following example demonstrates enabling navigation for the last Breadcrumb item: ```cshtml @using Syncfusion.Blazor.Navigations @@ -73,4 +79,4 @@ Breadcrumb enables the navigation for the last item by setting the [EnableActive ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VtrKWhMpfqgKOtmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-enable-navigation.png) \ No newline at end of file +![Blazor Breadcrumb with Last Item Navigation Enabled](./images/blazor-Breadcrumb-enable-navigation.png) \ No newline at end of file diff --git a/blazor/breadcrumb/overflow.md b/blazor/breadcrumb/overflow.md index bbb55f13bb..807a470566 100644 --- a/blazor/breadcrumb/overflow.md +++ b/blazor/breadcrumb/overflow.md @@ -9,9 +9,9 @@ documentation: ug # Overflow Mode in Blazor Breadcrumb Component -In the [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component, [MaxItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_MaxItems) and [OverflowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_OverflowMode) properties were used to limit the number of Breadcrumb items to be displayed. +The [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component provides extensive control over how its items are displayed when the available space is limited. This is achieved through the [MaxItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_MaxItems) property and various [OverflowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_OverflowMode) options. These properties enable you to efficiently manage the number of visible Breadcrumb items and how hidden items are presented. -In the following example, the [MaxItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_MaxItems) is set as 3 with [OverflowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_OverflowMode) as [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbOverflowMode.html#Syncfusion_Blazor_Navigations_BreadcrumbOverflowMode_Default). To prevent Breadcrumb item navigation, the [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_EnableNavigation) property is set as `false`. +In the following examples, [MaxItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_MaxItems) is set to `3`, and the [OverflowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_OverflowMode) as [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbOverflowMode.html#Syncfusion_Blazor_Navigations_BreadcrumbOverflowMode_Default). To prevent Breadcrumb item navigation, the [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_EnableNavigation) property is set as `false`. The following overflow modes are available in the Breadcrumb component. @@ -24,7 +24,7 @@ The following overflow modes are available in the Breadcrumb component. ## Collapsed -Collapsed mode shows the first and last Breadcrumb items and hides the remaining items with a collapsed icon. When the collapsed icon is clicked, all items become visible and navigable. +The `Collapsed` mode displays the first and last Breadcrumb items, while consolidating the intermediate items behind a collapsed icon (represented by `...`). When this icon is clicked, all hidden items become visible and navigable. This mode is ideal for saving horizontal space when many items are present, prioritizing only the start and end of the path. ```cshtml @using Syncfusion.Blazor.Navigations @@ -46,11 +46,11 @@ Collapsed mode shows the first and last Breadcrumb items and hides the remaining ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLsTTKpNEpBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/breadcrumb-collapsed.png) +![Blazor Breadcrumb Collapsed Mode](./images/breadcrumb-collapsed.png) ## Menu -Menu mode shows the number of Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items. +The `Menu` mode displays the maximum number of Breadcrumb items that can fit within the container's width. Any remaining items are placed into a submenu, accessible via an overflow indicator (e.g., a "more" button or ellipsis). This mode is suitable when intermediate items are less critical but should still be easily accessible through a secondary interaction. ```cshtml @using Syncfusion.Blazor.Navigations @@ -72,11 +72,11 @@ Menu mode shows the number of Breadcrumb items that can be accommodated within t ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rXBqMhszzUTTXZrh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/breadcrumb-menu.png) +![Blazor Breadcrumb Menu Mode](./images/breadcrumb-menu.png) ## Wrap -Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceeds the container space. +The `Wrap` mode allows Breadcrumb items to flow onto multiple lines if the component's total width exceeds the available container space. This mode ensures all items remain visible without truncation or hiding, making it suitable for designs that can accommodate variable height. ```cshtml @using Syncfusion.Blazor.Navigations @@ -98,11 +98,11 @@ Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceed ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAsLCzJKeBQENj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/breadcrumb-wrap.png) +![Blazor Breadcrumb Wrap Mode](./images/breadcrumb-wrap.png) ## Scroll -Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space. +The `Scroll` mode introduces an HTML scrollbar when the Breadcrumb's content overflows its container. This allows users to horizontally scroll through all items. This mode is best used when maintaining a single line of breadcrumbs is critical, even if it requires horizontal scrolling. ```cshtml @using Syncfusion.Blazor.Navigations @@ -126,11 +126,11 @@ Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the c ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BXrqihCTJgoRdALp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/breadcrumb-scroll.png) +![Blazor Breadcrumb Scroll Mode](./images/breadcrumb-scroll.png) ## Hidden -Hidden mode shows the maximum number of items possible in the container space and hides the remaining items. Clicking on a previous item will make the hidden item visible. +The `Hidden` mode displays the maximum possible number of items within the container's space and simply hides any excess items without providing an explicit overflow indicator. Clicking on a visible previous item will reveal sequentially hidden items. This mode is suitable for minimalistic designs where screen space savings are prioritized and users are expected to navigate backwards to find hidden items. ```cshtml @using Syncfusion.Blazor.Navigations @@ -152,8 +152,8 @@ Hidden mode shows the maximum number of items possible in the container space an ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rZVqChCzJqeEiZQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/bread-overflow-hidden.png) +![Blazor Breadcrumb Hidden Mode](./images/overflow-hidden.png) ## None -None mode shows all the items on a single line. \ No newline at end of file +The `None` mode ensures that all Breadcrumb items are rendered on a single line. \ No newline at end of file diff --git a/blazor/breadcrumb/style-and-appearance.md b/blazor/breadcrumb/style-and-appearance.md index 340436db6f..9ebfbb4cfe 100644 --- a/blazor/breadcrumb/style-and-appearance.md +++ b/blazor/breadcrumb/style-and-appearance.md @@ -7,21 +7,25 @@ control: Breadcrumb documentation: ug --- -# Styles and Appearances in Blazor Breadcrumb Component +# Styles and Appearance in Blazor Breadcrumb Component -To modify the Breadcrumb appearance, you need to override the default CSS of Breadcrumb component. Find the list of CSS classes and its corresponding section in Breadcrumb component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). +To modify the visual presentation of the Blazor Breadcrumb component, you need to override the default CSS of Breadcrumb component. Find the list of CSS classes and its corresponding section in Breadcrumb component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). + +### Common CSS Classes for Customization + +The following table lists key CSS classes and their corresponding sections within the Breadcrumb component, which you can target for styling: |CSS Class | Purpose of Class | |-----|----- | -|.e-breadcrumb .e-breadcrumb-item|To customize the background of breadcrumb item.| +|.e-breadcrumb .e-breadcrumb-item|To customize the background of a breadcrumb item.| |.e-breadcrumb .e-breadcrumb-text|To customize the color of breadcrumb text.| |.e-breadcrumb .e-breadcrumb-icon|To customize the color of breadcrumb icon.| |.e-breadcrumb .e-breadcrumb-separator|To customize the breadcrumb separator.| |.e-breadcrumb |To customize the entire background of breadcrumb.| -## Customizing the appearance of Breadcrumb +## Customizing the Appearance of the Breadcrumb -Use the following CSS to customize the background and text color of Breadcrumb. +The following example demonstrates how to apply custom styles to change the background and text color of Breadcrumb items, as well as the icon and separator colors: ```cshtml @using Syncfusion.Blazor.Navigations @@ -53,6 +57,6 @@ Use the following CSS to customize the background and text color of Breadcrumb. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoZsCXAGIEezKH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBotEhApRPLLBoQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Breadcrumb with Style and Appearance](./images/blazor-breadcrumb-style-and-appearance.png) \ No newline at end of file diff --git a/blazor/breadcrumb/templates.md b/blazor/breadcrumb/templates.md index 5b75ad02db..052c79d342 100644 --- a/blazor/breadcrumb/templates.md +++ b/blazor/breadcrumb/templates.md @@ -9,21 +9,21 @@ documentation: ug # Templates in Blazor Breadcrumb Component -Blazor has templated components which accepts one or more UI segments as input that can be rendered as part of the component during component rendering. Breadcrumb is a templated blazor component, that allow you to customize various part of the UI using template parameters. It allows you to render custom components or content based on your own logic. +The Blazor Breadcrumb component is templated, allowing you to customize various parts of its UI during rendering. This flexibility enables users to render custom components or content using your own logic, enhancing the appearance and functionality of your breadcrumbs. -The available template options in Breadcrumb are as follows, +The following template options are available in the Breadcrumb component: -[Item template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate) - Used to customize the items. +[Item template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate): Used to customize the rendering of individual Breadcrumb items. -[Separator template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate)- Used to customize the separators. +[Separator template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate): Used to customize the rendering of the separators between Breadcrumb items. -## Template context +## Template Context -The templates used by Breadcrumb are of type `RenderFragment` and they will be passed with parameters. You can access the parameters passed to the templates using implicit parameter named `context`. You can also change this implicit parameter name using `Context` attribute. +Templates used by the Breadcrumb component are of type `RenderFragment` and receive parameters that provide contextual data. Users can access these parameters using the implicit `context` parameter. You can optionally change this implicit parameter name using the `Context` attribute if needed. ## Item template -In the following example, shopping cart details are used as Breadcrumb items and each item is rendered as Chip component using [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate) tag directive. You can get the current item in `context` property. +The `ItemTemplate` enables developers to define a custom UI for each Breadcrumb item. In the following example, shopping cart details are used as Breadcrumb items and each item is rendered as Chip component using [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate) tag directive. The current item's data is accessible via the `context` parameter. ```cshtml @using Syncfusion.Blazor.Navigations @@ -49,11 +49,11 @@ In the following example, shopping cart details are used as Breadcrumb items and ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUsrippKxnwhYp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-item-template.png) +![Blazor Breadcrumb Item Template with Chips](./images/blazor-Breadcrumb-item-template.png) ## Separator template -In the following example, the separators are customized with icons using [SeparatorTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate) tag directive. You can get the previous and next item in `context` property. +The [SeparatorTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate) enables customization of the separators between Breadcrumb items. In the example below, separators are customized with icons using the[SeparatorTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate) tag directive. The `context` parameter provides access to the previous and next item data, though it's often unused for simple icon separators. ```cshtml @using Syncfusion.Blazor.Navigations @@ -81,11 +81,13 @@ In the following example, the separators are customized with icons using [Separa ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hjLUsrWzJARuZSHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/blazor-breadcrumb-separator-temp.png) +![Blazor Breadcrumb Separator Template with Icon](./images/blazor-breadcrumb-separator-temp.png) ## Customize Specific Item Template -The specific breadcrumb item can be customizable by adding the custom element as Child Content. In the following example, added the span element only for the breadcrumb text in breadcrumb item. +A specific Breadcrumb item can be customized by adding custom elements directly as its `ChildContent`. This allows for fine-grained control over individual item rendering without affecting the `ItemTemplate` applied globally via `BreadcrumbTemplates`. + +In the following example, a custom `` element with an `` tag is added as `ChildContent` to the last `BreadcrumbItem`, effectively overriding any `ItemTemplate` for that specific item. ```cshtml @using Syncfusion.Blazor.Navigations @@ -150,4 +152,4 @@ The specific breadcrumb item can be customizable by adding the custom element as ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgCrsTpAvZIhgB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Breadcrumb Component](./images/breadcrumb-specific-item-template.png) \ No newline at end of file +![Blazor Breadcrumb Specific Item Template](./images/breadcrumb-specific-item-template.png) \ No newline at end of file From b9f1bc3b3810d7c414fbc8180fb908ff3aab5cbe Mon Sep 17 00:00:00 2001 From: praveensf4999 Date: Tue, 23 Sep 2025 18:46:48 +0530 Subject: [PATCH 2/5] 983366: Updated the UG document for Breadcrumb --- blazor/breadcrumb/images/overflow-hidden.png | Bin 0 -> 6973 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 blazor/breadcrumb/images/overflow-hidden.png diff --git a/blazor/breadcrumb/images/overflow-hidden.png b/blazor/breadcrumb/images/overflow-hidden.png new file mode 100644 index 0000000000000000000000000000000000000000..a71be833c1685edeb131dc34e8b7c0459d523d47 GIT binary patch literal 6973 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 Q&B_a)sj91jR(ciwKYR9GlmGw# literal 0 HcmV?d00001 From 74fabb351f0ec8d1d7d835bdf18a1d10995fb57f Mon Sep 17 00:00:00 2001 From: praveensf4999 Date: Wed, 24 Sep 2025 11:48:59 +0530 Subject: [PATCH 3/5] 983366: Updated the UG document for the Breadcrumb --- blazor/breadcrumb/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/breadcrumb/accessibility.md b/blazor/breadcrumb/accessibility.md index 270abf8f39..20ef9ce6e7 100644 --- a/blazor/breadcrumb/accessibility.md +++ b/blazor/breadcrumb/accessibility.md @@ -22,7 +22,7 @@ The accessibility compliance for the Blazor Breadcrumb component is outlined bel | Color Contrast | Yes | | Mobile Device Support | Yes | | Keyboard Navigation Support | Yes | -| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | Yes | +| [Axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) Accessibility Validation | Yes |