Align Items Using Spacer in Blazor Toolbar

14 Aug 20262 minutes to read

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

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

@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 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 toolbar. This pushes all other items towards the right edge of the 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

NOTE

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