Skip to main content
All docs
V25.1
  • DxDropDownButtonBase.DropDownPosition Property

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

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.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:

    DxDropDownButton - Change Drop-Down Position

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