983366: Updated the UG document for Breadcrumb

Author: praveensf4999

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.
 
@@ -36,7 +36,7 @@ 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 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:
 
@@ -45,7 +45,7 @@ The Blazor Breadcrumb component implements [WAI-ARIA](https://www.w3.org/WAI/ARI
 | `aria-label` | Indicates the breadcrumb item text. |
 | `aria-disabled` | Indicates the disabled state of a breadcrumb item. |
 
-## Keyboard interaction
+## Keyboard Interaction
 
 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.
 
@@ -56,14 +56,14 @@ The Blazor Breadcrumb component follows the [keyboard interaction](https://www.w
 | <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 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 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

@@ -35,7 +35,7 @@ The Syncfusion [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/
 
 ![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-tag.png)
 
-## Items based on current URL
+## Items Based on 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
 
@@ -65,7 +65,7 @@ The Breadcrumb component can also be instructed to generate its items by parsing
 
 ![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-static-url.png)
 
-## Add or remove the Breadcrumb items
+## Add or Remove the Breadcrumb Items
 
 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.
 

blazor/breadcrumb/icons.md

@@ -11,7 +11,7 @@ documentation: ug
 
 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
+## Breadcrumb With Font Icon
 
 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.
 
@@ -33,7 +33,7 @@ To display a font icon on a Breadcrumb item, set the [IconCss](https://help.sync
 
 N> By default, icons are positioned to the left side of the item text.
 
-## Breadcrumb with image
+## Breadcrumb With Image
 
 Images can be incorporated into Breadcrumb 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, an image is added to a Breadcrumb item with specific height and width by using `e-image-home` CSS class.
 
@@ -61,7 +61,7 @@ Images can be incorporated into Breadcrumb items using the [IconCss](https://hel
 
 ![Blazor Breadcrumb with Image](./images/image.png)
 
-## Breadcrumb with SVG image
+## Breadcrumb With SVG Image
 
 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.
 
@@ -89,7 +89,7 @@ To add an SVG image to a Breadcrumb item, use the [IconCss](https://help.syncfus
 
 ![Breadcrumb with SVG Image](./images/svg.PNG)
 
-## Icon only
+## Icon Only
 
 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.
 
@@ -110,7 +110,7 @@ The following example demonstrates Breadcrumb items rendered only with icons:
 
 ![Breadcrumb with Icons Only](./images/icon-only.PNG)
 
-## Show icon only for first item
+## 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.
 
 The following example demonstrates an icon only for the initial Breadcrumb item:

blazor/breadcrumb/templates.md

@@ -21,7 +21,7 @@ The following template options are available in the Breadcrumb component:
 
 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
+## Item Template
 
 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.
 
@@ -51,7 +51,7 @@ The `ItemTemplate` enables developers to define a custom UI for each Breadcrumb
 
 ![Blazor Breadcrumb Item Template with Chips](./images/blazor-Breadcrumb-item-template.png)
 
-## Separator template
+## Separator Template
 
 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.