Merge pull request #6659 from syncfusion-content/983366-appbar

Updated the UG document for AppBar

Author: VengateshManiraj

blazor/appbar/accessibility.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in Blazor AppBar Component
 
-The [Blazor AppBar](https://www.syncfusion.com/blazor-components/blazor-appbar) 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.
+The Blazor AppBar[Blazor AppBar](https://www.syncfusion.com/blazor-components/blazor-appbar) component is developed to support accessibility and aligns with globally recognized standards for inclusive user interfaces. It follows guidelines from [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.
 
 The accessibility compliance for the Blazor AppBar component is outlined below.
 

blazor/appbar/design.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Design User Interface with Blazor AppBar Component
 
-## Spacer
+## AppBarSpacer
 
-[AppBarSpacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AppBarSpacer.html)  is used to provide spacing between the AppBar contents which gives additional space to the content layout.
+[AppBarSpacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AppBarSpacer.html) is used to introduce flexible spacing between items within the AppBar. It is particularly useful for pushing content to the left or right, or for creating balanced layouts.
 
-The following example depicts the code to provide spacing between the home and pan buttons in the AppBar:
+The following example demonstrates how to use `AppBarSpacer` to provide dynamic spacing between buttons:
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations
@@ -33,11 +33,11 @@ The following example depicts the code to provide spacing between the home and p
 ![Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Separator
+## AppBarSeparator
 
-[AppBarSeparator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AppBarSeparator.html) shows a vertical line to visually group or separate the AppBar contents.
+[AppBarSeparator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AppBarSeparator.html) visually divides AppBar contents with a vertical line. This is useful for grouping related actions or types of navigation items.
 
-The following example depicts the code to provide a vertical line between a group of buttons in the AppBar.
+The following example shows how to use `AppBarSeparator` to visually group action buttons:
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations
@@ -70,9 +70,10 @@ The following example depicts the code to provide a vertical line between a grou
 
 ![Blazor AppBar with Separator.](./images/blazor-appbar-separator.png)
 
-## Media Query
+## Responsive AppBar with Media Queries
 
-Media Query is used to adjusting the AppBar for different screen sizes. Resize the screen to observe the responsive layout of the AppBar.
+CSS media queries can be used to create responsive layouts, allowing the AppBar to remain functional and visually consistent across both desktop and mobile devices.
+The following example demonstrates how CSS media queries can adjust the AppBar's layout to wrap its content and resize for smaller screens:
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations
@@ -116,9 +117,9 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 
 ![Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Designing AppBar with Menu
+## Designing AppBar with Menu Component
 
-**SfMenu** component can be rendered as a child content of AppBar. You can inherit the AppBar component styles by setting CSS class as `e-inherit` to SfMenu component.
+**SfMenu** can be rendered as a child of the `SfAppBar` to create complex navigation structures directly within the application bar. By setting `CssClass="e-inherit"` on the `SfMenu`, it adopts the AppBar's styling.
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations
@@ -176,7 +177,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 ![Blazor AppBar with Menu.](./images/blazor-appbar-menu.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Designing AppBar with Buttons
+## Designing AppBar with Buttons and Dropdown Buttons
 
 **SfButton** and **SfDropDownButton** component can be rendered as a child content of AppBar. You can inherit the AppBar component styles by setting CSS class as `e-inherit` to SfButton and SfDropDownButton component.
 
@@ -208,8 +209,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
     }
 </style>
 ```
-
-![Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.png)
+![Blazor AppBar with Buttons.](./images/blazor-appbar-button&dropdownbutton.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Designing AppBar with SideBar

blazor/appbar/images/blazor-appbar-button&dropdownbutton.png

@@ -9,15 +9,15 @@ documentation: ug
 
 # Positioning in Blazor AppBar Component
 
-The position of the AppBar can be set using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_Position) and [IsSticky](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_IsSticky) property. The AppBar provides the following options for setting its position:
+The AppBar component offers flexible control over its placement and behavior within your application's layout. You can configure its position and whether it remains visible during scrolling using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_Position) and [IsSticky](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_IsSticky) property. The AppBar provides the following options for setting its position:
 
 * Top AppBar
 * Bottom AppBar
 * Sticky AppBar
 
 ### Top AppBar
 
-The top AppBar is the default one in which it positions the AppBar at the top of the content.
+A top AppBar is the most common configuration, positioning the AppBar at the top of its parent container or the viewport. This is the default behavior if the `Position` property is not explicitly set.
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations
@@ -63,7 +63,7 @@ The top AppBar is the default one in which it positions the AppBar at the top of
 
 ### Bottom AppBar
 
-This position can be set to the AppBar by setting `AppBarPosition.Bottom` to the property [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_Position). The bottom AppBar positions the AppBar at the bottom of the content.
+A bottom AppBar positions the component at the bottom of its parent container. This position can be set to the AppBar by setting `AppBarPosition.Bottom` to the property [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_Position).
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations
@@ -109,7 +109,7 @@ This position can be set to the AppBar by setting `AppBarPosition.Bottom` to the
 
 ### Sticky AppBar
 
-This position can be set to the AppBar by setting `true` to the property [IsSticky](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_IsSticky). AppBar will be sticky while scrolling the AppBar content.
+A sticky AppBar remains visible at the top of the viewport even when the page content is scrolled.This position can be set to the AppBar by setting `true` to the property [IsSticky](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_IsSticky).
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations

blazor/appbar/images/bottom_appbar.png

@@ -9,6 +9,8 @@ documentation: ug
 
 # Size and Color with Blazor AppBar Component
 
+The AppBar component offers extensive customization options for its visual `Size` (height) and `Color` scheme. 
+
 ## Size
 
 The size of the AppBar can be set using the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_Mode) property. The available types of the Blazor AppBar are as follows:
@@ -124,7 +126,7 @@ This height mode can be set to the AppBar by setting `AppBarMode.Dense` to the p
 ![Blazor AppBar with Dense Size](./images/dense_appbar.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VthKirWTrCLzRlMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Color
+## AppBar ColorMode
 
 The background and font colors can be set using the [ColorMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_ColorMode) property. The available types of background color for the Blazor AppBar are as follows:
 
@@ -135,7 +137,7 @@ The background and font colors can be set using the [ColorMode](https://help.syn
 
 ### Light AppBar
 
-This color mode is the default one in which the AppBar can be displayed with a light background and its corresponding font color.
+This is the default color mode, displaying the AppBar with a light background and corresponding dark text/icon colors for high contrast and readability.
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations

blazor/appbar/position.md

@@ -9,7 +9,13 @@ documentation: ug
 
 # Styles and Appearances in Blazor AppBar Component
 
-To modify the AppBar appearance, you need to override the default CSS of the AppBar component. Find the list of CSS classes and their corresponding sections in the AppBar 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).
+The AppBar component is highly customizable, allowing you to tailor its visual presentation to perfectly fit your application's design language. This document outlines various methods to modify the AppBar's appearance, focusing on overriding default CSS, utilizing custom classes, and applying HTML attributes.
+
+For comprehensive custom theming across Syncfusion controls, the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material) offers an intuitive interface to create and manage personalized custom themes efficiently.
+
+## Customizing AppBar Elements with CSS Classes
+
+The AppBar component includes a set of default CSS classes that can be targeted to customize its appearance. Below is a list of commonly used classes and their respective purposes:
 
 |CSS Class | Purpose of Class |
 |-----|----- |
@@ -25,7 +31,9 @@ N> You can change the prominent AppBar height if larger titles, images, or texts
 
 ## CssClass
 
-CssClass is used for AppBar customization based on the custom class. In the example below, the AppBar background and color are customized using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_CssClass) property.
+The `CssClass` property of the `SfAppBar` component assigns a custom CSS class to its root HTML element. This provides a clean way to introduce your own styles or completely override existing ones.
+
+In the example below, the AppBar background and color are customized using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_CssClass) property.
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations
@@ -50,7 +58,9 @@ CssClass is used for AppBar customization based on the custom class. In the exam
 
 ## HtmlAttributes
 
-It can be used for additional inline attributes by specifying as inline attributes or by specifying `@attributes` directive. In the code example below, the aria-label of the AppBar is customized by specifying as inline attributes.
+The `SfAppBar` component provides the `HtmlAttributes` property (via the `@attributes` directive) to allow you to add any standard HTML attribute directly to the root element (`<div>`) of the AppBar. This is particularly useful for adding ARIA attributes for accessibility, custom `data-` attributes, or IDs.
+
+In the example below, an `aria-label` attribute is added to the AppBar to provide an accessible name for screen reader users.
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations
@@ -62,4 +72,4 @@ It can be used for additional inline attributes by specifying as inline attribut
     </SfAppBar>
 </div>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVgWBizBhGaNVBq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVgWBizBhGaNVBq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}