Align Items Using Spacer in Blazor Toolbar

27 Aug 20262 minutes to read

A Blazor Toolbar Spacer manages the alignment of toolbar items. It creates an adjustable empty space within the Blazor Toolbar whose size adapts to the available width.

To achieve different alignment styles, strategically place Spacer items within the Blazor 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 Blazor Toolbar.

@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

Left and Right alignment

Insert a spacer between items intended for left and right alignment. This pushes the right-aligned items towards the edge of the Blazor Toolbar.

@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

Right alignment

Insert a spacer as the first item in the Blazor Toolbar. This pushes all other items towards the right edge of the Blazor Toolbar.

@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

Avoid using the Align property in toolbar items when Spacer is used.