Skip to main content

DxToolbarItemBase.Alignment Property

Specifies the item’s position.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor


public ToolbarItemAlignment Alignment { get; set; }

Property Value

Type Default Description
ToolbarItemAlignment Left

A ToolbarItemAlignment enumeration value.

Available values:

Name Description

The item is aligned to the left of the underlying container.


The item is aligned to the right of the underlying container.


The Toolbar stretches to the container width. Use the item’s Alignment property to specify the item’s alignment (to the left or to the right) relative to the container boundaries.


When you specify the Alignment property, the item order in markup is taken into account only for the items with the same property value (alignment).

    <DxToolbarItem Text="Insert"  Alignment="ToolbarItemAlignment.Right"></DxToolbarItem>
    <DxToolbarItem Text="Edit" Alignment="ToolbarItemAlignment.Left"></DxToolbarItem>
    <DxToolbarItem Text="Delete" Alignment="ToolbarItemAlignment.Right"></DxToolbarItem>

Toolbar Item Alignment

If you divide Toolbar items into groups, the component aligns grouped items according to the group first item’s Alignment property value.

<div class="card p-2">
        <DxToolbarItem Text="Item" />
        <DxToolbarItem Text="Link to the next demo" 
                       NavigateUrl="" />
        <DxToolbarItem BeginGroup="true" IconCssClass="oi oi-align-left" />
        <DxToolbarItem IconCssClass="oi oi-align-center" />
        <DxToolbarItem IconCssClass="oi oi-align-right" />
        <DxToolbarItem IconCssClass="oi oi-cog" 
                       BeginGroup="true" />
        <DxToolbarItem Text="About" IconCssClass="oi oi-info" />

Toolbar Overview

See Also