DxToolbar.DropDownDisplayMode Property

Specifies how the toolbar’s drop-down items display menus.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Default	Description
DropDownDisplayMode	Auto	A DropDownDisplayMode 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 all menus in the toolbar. When the property is set to Auto, the menus adapt to the device type.

<div class="card p-2">
    <DxToolbar DropDownDisplayMode="DropDownDisplayMode.DropDown">
        <Items>
            <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-left" />
            <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-center" />
            <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-right" />
            <DxToolbarItem Text="Format" BeginGroup="true">
                <Items>
                    <DxToolbarItem Text="Times New Roman" />
                    <DxToolbarItem Text="Tahoma" />
                    <DxToolbarItem Text="Verdana" />
                </Items>
            </DxToolbarItem>
            <DxToolbarItem Text="Size" DropDownDisplayMode="DropDownDisplayMode.ModalDialog">
                <Items>
                    <DxToolbarItem Text="8pt" />
                    <DxToolbarItem Text="10pt" />
                    <DxToolbarItem Text="12pt" />
                </Items>
            </DxToolbarItem>
            <DxToolbarItem Text="Style" DropDownDisplayMode="DropDownDisplayMode.ModalBottomSheet">
                <Items>
                    <DxToolbarItem IconCssClass="tb-icon tb-icon-bold" Text="Bold" />
                    <DxToolbarItem IconCssClass="tb-icon tb-icon-italic" Text="Italic" />
                    <DxToolbarItem IconCssClass="tb-icon tb-icon-underline" Text="Underline" />
                </Items>
            </DxToolbarItem>
        </Items>
    </DxToolbar>
</div>

You can also specify display mode for an individual toolbar item. Refer to the DxToolbarItem.DropDownDisplayMode property description. If you set this property to the value different from Auto, this value overrides the DxToolbar.DropDownDisplayMode property’s value.

Run Demo: Toolbar - Drop-Down Items