Merge pull request #6794 from syncfusion-content/984382-Menubar

Updated the UG document for Menu Bar Component.

Author: VengateshManiraj

blazor/menu-bar/accessibility.md

@@ -38,7 +38,7 @@ The accessibility compliance for the Blazor Menu bar component is outlined below
 
 ## WAI-ARIA attributes
 
-The Blazor Menu bar component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Menu bar component:
+The Blazor Menu Bar component incorporates [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to ensure comprehensive accessibility. The following ARIA attributes are utilized within the component:
 
 | Attributes | Purpose |
 | --- | --- |
@@ -49,9 +49,9 @@ The Blazor Menu bar component followed the [WAI-ARIA](https://www.w3.org/WAI/ARI
 | `aria-label` | Indicates the menu item text. |
 | `aria-disabled` | Indicates the state of menu item whether it is disabled. |
 
-## Keyboard interaction
+## Keyboard Interaction
 
-The Blazor Menu bar component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/#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 Menu Bar component.
+The Blazor Menu Bar component adheres to the [keyboard interaction guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/#keyboardinteraction), facilitating effortless navigation for users who rely on assistive technologies and keyboard-only interaction. The following keyboard shortcuts are supported to provide a seamless user experience:
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
@@ -64,14 +64,14 @@ The Blazor Menu bar component followed the [keyboard interaction](https://www.w3
 | <kbd>Home</kbd> | <kbd>Home</kbd> | Focuses the first item. |
 | <kbd>End</kbd> | <kbd>End</kbd> | Focuses the last item.
 
-## Ensuring accessibility
+## Ensuring Accessibility
 
-The Blazor Menu Bar 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 Menu Bar component are rigorously validated through [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) integrated with Playwright tests. This automated testing approach helps maintain high accessibility standards.
 
 The accessibility compliance of the Blazor Menu Bar component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/menu) in a new window to evaluate the accessibility of the Blazor Menu Bar component with accessibility tools.
 
 {% previewsample "https://ej2.syncfusion.com/accessibility/menu.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/menu-bar/animation.md

@@ -3,13 +3,13 @@ layout: post
 title: Animation in Blazor Menu Bar Component | Syncfusion
 description: Checkout and learn here all about Change animation settings in Syncfusion Blazor ContextMenu component and more.
 platform: Blazor
-control: Context Menu
+control: Menu Bar
 documentation: ug
 ---
 
 # Animation in Blazor Menu Bar Component
 
-To change the animation of the Menu bar component, [MenuAnimationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuAnimationSettings.html) component is used to initialize the animation properties.
+The Blazor Menu Bar component allows the customization of animation for its sub-menus. The [`MenuAnimationSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuAnimationSettings.html) component is used to define these animation properties. This provides a visually engaging experience when sub-menus open and close.
 The supported effects for Context Menu are,
 
 | Effect | Functionality |
@@ -60,4 +60,5 @@ The following sample illustrates how to open Context Menu with `FadeIn` effect w
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrysjtAhBgtpWoH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 ![Blazor Menubar with Style and Appearance](./images/blazor-menubar-animation.gif)

blazor/menu-bar/data-source-binding-and-custom-menu-items.md

@@ -1,19 +1,18 @@
 ---
 layout: post
-title: DataSource Binding and Custom Items in Blazor Menu Bar | Syncfusion
+title: Data Source Binding and Custom Items in Blazor Menu Bar | Syncfusion
 description: Learn here all about data source binding and custom items in Syncfusion Blazor Menu Bar component and more.
 platform: Blazor
 control: Menu Bar 
 documentation: ug
 ---
 
-# DataSource Binding and Custom Items in Blazor Menu Bar Component
-
-The [Blazor Menu Bar](https://www.syncfusion.com/blazor-components/blazor-menu-bar) supports data source bindings such as data source that can be structured as `Self-referential` data.
+# Data Source Binding and Custom Items in Blazor Menu Bar Component
 
+The [Blazor Menu Bar](https://www.syncfusion.com/blazor-components/blazor-menu-bar) component supports data source binding, including structures such as self-referential data. This allows for dynamic generation of menu hierarchies from various data sources.
 ## Self-referential data
 
-Menu Bar can be populated from self-referential data structure that contains data with `ParentId` mapping.
+The Menu Bar can be populated from a self-referential data structure that defines parent-child relationships through a `ParentId` mapping.
 
 In the following example, the **id**, **pId**, and **text** columns from self-referential data have been mapped to the [ItemId](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuFieldSettings.html#Syncfusion_Blazor_Navigations_MenuFieldSettings_ItemId), [ParentId](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuFieldSettings.html#Syncfusion_Blazor_Navigations_MenuFieldSettings_ParentId), and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuFieldSettings.html#Syncfusion_Blazor_Navigations_MenuFieldSettings_Text) fields, respectively.
 
@@ -70,13 +69,14 @@ In the following example, the **id**, **pId**, and **text** columns from self-re
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrysjNKVhgmHQHC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 ![Data Binding in Blazor MenuBar](./images/blazor-menubar-data-binding.png)
 
 N> In the above example, `TValue` is specified as `MenuItemModel` because the menu is rendered using the `Items` property.
 
 ## Handling Self-Referential Data with CustomMenuItem TValue in MenuTemplate
 
-When using TValue with CustomMenuItem in the [MenuTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuTemplates-1.html), self-referential data structures with ParentId mapping are not supported. To address this limitation, you need to manually map the parent and child menu items within the menu template. In the following example, we demonstrate how to configure the SfMenu component using self-referential data with CustomMenuItem as the TValue in the MenuTemplate.
+When using a custom generic type (`TValue="CustomMenuItem"`) with [`MenuTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuTemplates-1.html), the Menu Bar's built-in self-referential data processing based on `ParentId` mapping is not directly supported. To address this limitation, you need to manually map the parent and child menu items within the menu template. In the following example, we demonstrate how to configure the SfMenu component using self-referential data with CustomMenuItem as the TValue in the MenuTemplate.
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations
@@ -197,11 +197,14 @@ When using TValue with CustomMenuItem in the [MenuTemplates](https://help.syncfu
 }
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhIijtKhVJJaFLz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 ![Blazor MenuBar with Self-Referential Data with CustomMenuItem TValue in MenuTemplate](./images/blazor-menubar-self-referential-data.png)
 
 ## Custom Menu Bar Items
 
-To customize Menu Bar items in your application, set your customized template using [MenuTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuTemplates-1.html). In the following example, the Menu Bar has been rendered with customized Menu Bar items.
+To customize the rendering of Menu Bar items, define a custom template using the [`MenuTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuTemplates-1.html) component. This allows the embedding of rich content, custom styles, or interactive elements directly within each menu item.
+
+The following example demonstrates rendering a Menu Bar with extensively customized items, including images, badges, and a detailed "About Us" card.
 
 ```cshtml
 
@@ -377,4 +380,5 @@ To customize Menu Bar items in your application, set your customized template us
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtreijXUVhyRIyrJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 ![Blazor MenuBar with Custom Item](./images/blazor-menubar-custom-item.png)