DxDropDownButton.DropDownDisplayMode Property

Specifies how the Drop-Down Button component displays its drop-down elements.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(DropDownDisplayMode.Auto)]
[Parameter]
public DropDownDisplayMode DropDownDisplayMode { get; set; }

Property Value

Type	Default	Description
DropDownDisplayMode	Auto	An enumeration value.

Available values:

Name	Description
Auto	Mobile and tablet devices show the menu in a modal bottom sheet. Other device types show the menu as a drop-down list. ‘
DropDown	The menu is shown as a drop-down list.
ModalDialog	The menu is shown in a modal dialog.
ModalBottomSheet	The menu is shown in a modal bottom sheet.

Remarks

Use the DropDownDisplayMode property to specify display mode for the Drop-Down Button component’s drop-down elements. When the property is set to Auto, drop-down elements adapt to the device type.

The following code snippet changes the display mode of drop-down elements:

<DxDropDownButton RenderStyle="ButtonRenderStyle.Secondary"
                  Text="Clipboard"
                  IconCssClass="tb-icon tb-icon-paste"
                  CssClass="me-1"
                  DropDownDisplayMode="DropDownDisplayMode.ModalBottomSheet">
    <Items>
        <DxDropDownButtonItem Text="Cut" IconCssClass="menu-icon-cut menu-icon" />
        <DxDropDownButtonItem Text="Copy" IconCssClass="menu-icon-copy menu-icon" />
        <DxDropDownButtonItem Text="Paste" IconCssClass="tb-icon tb-icon-paste" />
        <DxDropDownButtonItem Text="Paste Special" BeginGroup="true">
            <Items>
                <DxDropDownButtonItem Text="Paste Text Only" />
                <DxDropDownButtonItem Text="Paste Picture" Enabled="false" />
                <DxDropDownButtonItem Text="Paste as Hyperlink" />
            </Items>
        </DxDropDownButtonItem>
    </Items>
</DxDropDownButton>