876873: Added the topic in UG for blazor toolbar spacer support

blazor-toc.html

@@ -4254,6 +4254,7 @@
 				</ul>
 			</li>
 			<li><a href="/blazor/toolbar/item-configuration">Item Configuration</a></li>
+			<li><a href="/blazor/toolbar/align-items-using-spacer.md">Align Items</a></li>
 			<li><a href="/blazor/toolbar/responsive-mode">Responsive Mode</a></li>
 			<li><a href="/blazor/toolbar/accessibility">Accessibility</a></li>
 			<li><a href="/blazor/toolbar/style">Style and Appearance</a></li>

blazor/toolbar/align-items-using-spacer.md

@@ -0,0 +1,84 @@
+---
+layout: post
+title: Align Items Using Spacer in Blazor Toolbar Component | Syncfusion
+description: Checkout and learn here all about align the items using spacer in Syncfusion Blazor Toolbar component and more.
+platform: Blazor
+control: Toolbar
+documentation: ug
+---
+
+# Align Items Using Spacer in Blazor Toolbar Component
+
+A Toolbar [Spacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type) is used for managing the alignment of a toolbar items. It creates an adjustable empty space within the toolbar, providing a clear separation between different items. The spacer dynamically adapts to the toolbar's width.
+
+To achieve different alignment styles, the spacer can be strategically placed among the toolbar items:
+
+## Left, Center, and Right alignment
+
+Insert spacers at the end of the items on the left and in the center. This will push the remaining items to the right and center, creating a balanced distribution across the toolbar.
+
+```cshtml
+@using Syncfusion.Blazor.Navigations
+<SfToolbar>
+  <ToolbarItems>
+    <ToolbarItem Text="Cut"></ToolbarItem>
+    <ToolbarItem Text="Copy"></ToolbarItem>
+    <ToolbarItem Text="Paste"></ToolbarItem>
+    <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
+    <ToolbarItem Text="Bold"></ToolbarItem>
+    <ToolbarItem Text="Underline"></ToolbarItem>
+    <ToolbarItem Text="Italic"></ToolbarItem>
+    <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
+    <ToolbarItem Text="Search"></ToolbarItem>
+    <ToolbarItem Text="Settings"></ToolbarItem>
+  </ToolbarItems>
+</SfToolbar>
+```
+![Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-center-item.png)
+
+## Left and Right alignment
+
+Insert the spacer between the items you want on the left and those you want on the right. This will push the right-aligned items towards the edge of the toolbar.
+
+```cshtml
+@using Syncfusion.Blazor.Navigations
+<SfToolbar>
+  <ToolbarItems>
+    <ToolbarItem Text="Cut"></ToolbarItem>
+    <ToolbarItem Text="Copy"></ToolbarItem>
+    <ToolbarItem Text="Paste"></ToolbarItem>
+    <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
+    <ToolbarItem Text="Bold"></ToolbarItem>
+    <ToolbarItem Text="Underline"></ToolbarItem>
+    <ToolbarItem Text="Italic"></ToolbarItem>
+    <ToolbarItem Text="Search"></ToolbarItem>
+    <ToolbarItem Text="Settings"></ToolbarItem>
+  </ToolbarItems>
+</SfToolbar>
+```
+![Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-item.png)
+
+## Right alignment
+
+Insert the spacer as the first item in the toolbar. This will push all other items towards the right edge of the toolbar.
+
+```cshtml
+@using Syncfusion.Blazor.Navigations
+<SfToolbar>
+  <ToolbarItems>
+    <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
+    <ToolbarItem Text="Cut"></ToolbarItem>
+    <ToolbarItem Text="Copy"></ToolbarItem>
+    <ToolbarItem Text="Paste"></ToolbarItem>
+    <ToolbarItem Text="Bold"></ToolbarItem>
+    <ToolbarItem Text="Underline"></ToolbarItem>
+    <ToolbarItem Text="Italic"></ToolbarItem>
+    <ToolbarItem Text="Search"></ToolbarItem>
+    <ToolbarItem Text="Settings"></ToolbarItem>
+  </ToolbarItems>
+</SfToolbar>
+```
+![Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-right-item.png)
+
+
+N> Avoid using the `Align` property in the toolbar item if `Spacer` was utilized.

blazor/toolbar/item-configuration.md

@@ -56,6 +56,8 @@ It specifies the location for aligning Toolbar items on the Toolbar. Each comman
 
 ![Aligning Blazor Toolbar Item](./images/blazor-toolbar-align-item.png)
 
+To optimize the alignment of Toolbar items without using [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Align) property, utilize the [Spacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type) in toolbar. Refer [here](./align-items.md) to integrate spacer in Toolbar.
+
 ## CssClass
 
 Single or multiple CSS classes can be added to the Toolbar commands using the Toolbar item `CssClass` property. Refer [Set command customization](https://blazor.syncfusion.com/documentation/toolbar/how-to/set-command-customization) for snippet and output.
@@ -238,6 +240,8 @@ It specifies the types of command to be rendered in the Toolbar. Supported types
 
 3. **Input**: Creates an input element that is applicable to template rendering with Syncfusion controls like DropDownList, AutoComplete, etc.
 
+4. **Spacer**: Adds a space within the Toolbar item. [Spacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type) can be used to align the Toolbar items to the left, center, and right.
+
 ### Button
 
 `Button` is the default command [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type), and it can be rendered by using the `Text` property.