DxDropDownButtonBase.DropDownPosition Property

Specifies the drop-down element’s position relative to the target element.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

[Parameter]
public DropDownPosition DropDownPosition { get; set; }

Property Value

An enumeration value.

|

Available values:

Displays the drop-down element at the top edge of the target element.

| | Right |

Displays the drop-down element at the right edge of the target element.

| | Bottom |

Displays the drop-down element at the bottom edge of the target element.

| | Left |

Displays the drop-down element at the left edge of the target element.

|

Remarks

Use the DropDownPosition property to position the drop-down element relative to the target element. The following components implement the DropDownPosition property:

DxDropDownButtonA toggleable button that reveals a drop-down element with a list of commands or custom content.DxSplitButtonA composite control that consists of a primary button and a toggleable secondary button that reveals a drop-down element.DxDropDownButtonItemDefines a drop-down list item. Used in DxDropDownButton or DxSplitButton.

Note

If the target component is close to a browser window’s edge and there is not enough space to display the drop-down element in the specified direction, the drop-down element is displayed in the opposite direction.

Example

The following code snippet changes the position of the main drop-down element in the DxDropDownButton component and customizes the drop-down toggle icon:

• Razor
• CSS

<DxDropDownButton Text="Blazor Components"
                  RenderStyleMode="ButtonRenderStyleMode.Outline"
                  DropDownToggleCssClass="toggle-icon"
                  DropDownPosition="DropDownPosition.Right">
    <Items>
        <DxDropDownButtonItem Text="Documentation"
                              NavigateUrl="https://docs.devexpress.com/Blazor/400725/blazor-components" />
        <DxDropDownButtonItem Text="Demos"
                              NavigateUrl="https://demos.devexpress.com/blazor/" />
    </Items>
</DxDropDownButton>

.toggle-icon {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
    -webkit-mask-image: url(../images/arrow.svg);
    mask-image: url(../images/arrow.svg);
}

See Also

DxDropDownButtonBase Class

DxDropDownButtonBase Members

DevExpress.Blazor Namespace