`. Use for [styling customizations]({%slug themes-override%}). |
+| `Height` | `string` | The height of the AppBar. |
+| `ThemeColor` | `Telerik.Blazor.ThemeConstants.AppBar.ThemeColor` | Adjust the color of the AppBar |
+| `Width` | `string` | The width of the AppBar. |
+
+You can find more information for customizing the AppBar appearance in the [Appearance article]({%slug appbar-appearance%}).
+
+## AppBar Reference and Methods
+
+To execute AppBar methods, obtain reference to the component instance with `@ref`.
+
+| Method | Description |
+|---------|-------------|
+| `Refresh` | Use the method to programmatically re-render the AppBar. |
+
+
+
+````CSHTML
+
Refresh AppBar
+
+
+
+@code {
+ private TelerikAppBar AppBarRef { get; set; }
+
+ private void RefreshAppBar()
+ {
+ AppBarRef.Refresh();
+ }
+}
+````
+
+## Next Steps
+
+* [Explore the AppBar Sections]({%slug appbar-sections%})
+* [Use the AppBar Sections]({%slug appbar-separators%})
+* [Customize the AppBar position]({%slug appbar-position%})
+
+## See Also
+
+* [Live AppBar Demos](https://demos.telerik.com/blazor-ui/appbar/overview)
+* [AppBar API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikAppBar)
diff --git a/components/appbar/position.md b/components/appbar/position.md
new file mode 100644
index 0000000000..450d174809
--- /dev/null
+++ b/components/appbar/position.md
@@ -0,0 +1,41 @@
+---
+title: Position
+page_title: AppBar Position
+description: Position settings of the AppBar for Blazor.
+slug: appbar-position
+tags: telerik,blazor,appbar,navbar,position
+published: True
+position: 35
+---
+
+# Position Settings
+
+This article outlines the available AppBar parameters, which control its position.
+
+>note Read the [CSS positioning MDN documentation article](https://developer.mozilla.org/en-US/docs/Web/CSS/position) to get a better understanding of how the AppBar component positioning works.
+
+## Position
+
+The `Position` parameter accepts a member of the `AppBarPosition` enum and sets the `top` and `bottom` CSS properties:
+
+| Enum member | Description |
+|---------------|--------|
+| `None`
(default) | Does not set any values for the `top` and `bottom` CSS properties. |
+| `Top` | Sets the `top: 0` and `bottom: auto` CSS properties. |
+| `Bottom` | Sets the `top: auto` and `bottom: 0` CSS properties. |
+
+>info The `Position` parameter takes effect when used with fixed [PositionMode](#positionmode).
+
+## PositionMode
+
+The `PositionMode` parameter accepts a member of the `AppBarPositionMode` enum and sets how the AppBar is positioned according to the [flow of the document](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow):
+
+| Enum member | Description |
+|---------------|--------|
+| `Static`
default value | The AppBar displays at the position where it is defined and scrolls together with the other page content. |
+| `Fixed` | The AppBar displays at a fixed place, which depends on the `Position` parameter. The component doesn't scroll with the other page content. |
+| `Sticky` | The AppBar displays at the position where it is defined. It scrolls together with the other page content, until it reaches the top of the browser viewport. Then the component will remain there. Use the `Sticky` `PositionMode` together with `Top` `Position` .|
+
+## See Also
+
+ * [Live Demo: AppBar Position](https://demos.telerik.com/blazor-ui/appbar/position)
\ No newline at end of file
diff --git a/components/appbar/sections.md b/components/appbar/sections.md
new file mode 100644
index 0000000000..2003b5e9c1
--- /dev/null
+++ b/components/appbar/sections.md
@@ -0,0 +1,59 @@
+---
+title: Sections
+page_title: AppBar - Sections
+description: Add Content in the AppBar Component
+slug: appbar-sections
+tags: telerik,blazor,appbar,sections,section,content
+published: True
+position: 1
+---
+
+# Sections
+
+The `
` is a template-based component that allows you to render HTML content or Razor components in the AppBar component.
+
+>note Render content only inside the `` tag, otherwise it will display outside the AppBar component.
+
+## AppBar Section Parameters
+
+The nested `AppBarSection` tag exposes parameters:
+
+| Parameter | Type and Default Value | Description |
+| ----------- | ----------- | ----------- |
+| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the AppBar section. You could use that class to cascade styles. |
+| `Visible` | `bool`
(`true`) | Specifies if the section will be visible in the AppBar. |
+
+>caption The Telerik AppBar sections with its parameter
+
+````CSHTML
+@* The AppBar sections with its parameters *@
+
+
+
+Toggle the visibility of the Our Mission section
+
+
+
+
+
+ Our Products
+
+
+
+ Our Mission
+
+
+
+@code{
+ private bool isSectionVisible { get; set; } = true;
+}
+````
+
+## See Also
+
+ * [Live Demo: AppBar Overview](https://demos.telerik.com/blazor-ui/appbar/overview)
+ * [AppBar Overview]({%slug appbar-overview%})
diff --git a/components/appbar/separators.md b/components/appbar/separators.md
new file mode 100644
index 0000000000..687b3c2907
--- /dev/null
+++ b/components/appbar/separators.md
@@ -0,0 +1,90 @@
+---
+title: Separators
+page_title: AppBar - Separators
+description: Separate items in the Telerik AppBar for Blazor
+slug: appbar-separators
+tags: telerik,blazor,appbar,navbar,separator,spacer
+published: True
+position: 5
+---
+
+# Separators
+
+You can visually separate the items in the Telerik AppBar for Blazor. Depending on the needs of your application you can use of the following, or a combination of them.
+
+## AppBar Separator
+
+To separate two items with a solid line, add the `` tag between them.
+
+### AppBar Separator Parameters
+
+The nested `AppBarSeparator` tag exposes the following parameters:
+
+| Parameter | Type and Default Value | Description |
+| ----------- | ----------- | ----------- |
+| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the AppBar separator. Use that class to cascade styles. |
+| `Visible` | `bool`
`true` | Specifies if the separator will be visible in the AppBar. |
+
+## AppBar Spacer
+
+To separate two items with a solid line, add the `` tag between them.
+
+Use the `` to define empty space in the AppBar which separates the items.
+
+### AppBar Spacer Parameters
+
+The nested `AppBarSpacer` tag exposes the following parameters:
+
+| Parameter | Type and Default Value | Description |
+| ----------- | ----------- | ----------- |
+| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the AppBar spacer. Use that class to cascade styles. |
+| `Size` | `string` | The width of the spacer. All `AppBarSpacer` tags without Size will take up the same amount of the remaining space between the [Sections]({%slug appbar-sections%}). |
+| `Visible` | `bool`
`true` | Specifies if the spacer will be visible in the AppBar. |
+
+>caption The AppBar separators
+
+````CSHTML
+@* The AppBar content dividers with some of their parameters and values *@
+
+
+
+
+
+ Our Logo
+
+
+
+
+
+ Our Products
+
+
+
+
+
+ Our Mission
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+````
+
+
+## See Also
+
+ * [Live Demo: AppBar Overview](https://demos.telerik.com/blazor-ui/appbar/overview)
+ * [AppBar Overview]({%slug appbar-overview%})