DxDropDownButtonBase.DropDownPosition Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
DropDownPosition	An enumeration value.

Available values:

Name	Description
Top	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:

DxDropDownButton

A toggleable button that reveals a drop-down element with a list of commands or custom content.

DxSplitButton

A composite control that consists of a primary button and a toggleable secondary button that reveals a drop-down element.

DxDropDownButtonItem

Defines 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

<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>

CSS

.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);
}