Merge pull request #6687 from syncfusion-content/983366-breadcrumb

Updated the UG document for Breadcrumb Component.

Author: VengateshManiraj

blazor/breadcrumb/accessibility.md

@@ -7,7 +7,7 @@ control: Button
 documentation: ug
 ---
 
-# Accessibility in Blazor Breadcrumb component
+# Accessibility in Blazor Breadcrumb Component
 
 The Blazor Breadcrumb component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
@@ -22,7 +22,7 @@ The accessibility compliance for the Blazor Breadcrumb component is outlined bel
 | Color Contrast | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 | Mobile Device Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 | Keyboard Navigation Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) Accessibility Validation | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 
 <style>
     .post .post-content img {
@@ -36,18 +36,18 @@ The accessibility compliance for the Blazor Breadcrumb component is outlined bel
 
 <div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>
 
-## WAI-ARIA attributes
+## 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
+## 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 |
 | --- | --- | --- |
@@ -56,14 +56,14 @@ The Blazor Breadcrumb component followed the [keyboard interaction](https://www.
 | <kbd>Enter</kbd> key in normal mode | <kbd>Enter</kbd> key in normal mode | Select the breadcrumb item. |
 | <kbd>Enter</kbd> key in normal mode | <kbd>Enter</kbd> key in normal mode | To open the popup of menu type overflow mode when you press enter on collapsed button and It will expand the items of collapsed type overflow mode when you press enter on collapsed button. |
 
-## Ensuring accessibility
+## 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" %}
 
-## See also
+## See Also
 
 * [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)

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) component supports to generate items based on the current URL by default. Alternatively, breadcrumb items can be manually defined using the[BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) tag directive or by setting the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html#Syncfusion_Blazor_Navigations_SfBreadcrumb_Url) property.
 
 [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
@@ -35,24 +35,25 @@ The [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-brea
 
 ![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-tag.png)
 
-## Items based on current URL
+## 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
 
 <SfBreadcrumb></SfBreadcrumb>
+
 ```
-{% 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)
 
 N> This output screenshot shows the [Bind to Location](https://blazor.syncfusion.com/demos/breadcrumb/bind-to-location) sample.
 
 ## 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 `<SfBreadcrumb>` component as like the below example.
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations
@@ -64,9 +65,9 @@ You can generate the Breadcrumb items by providing the [Url](https://help.syncfu
 
 ![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-static-url.png)
 
-## Add or remove the Breadcrumb items
+## 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" %}