Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxDropDownButtonItem Class

Defines a drop-down list item. Used in DxDropDownButton or DxSplitButton.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxDropDownButtonItem :
    DxDropDownButtonBase,
    IDisposable

#Remarks

The DxDropDownButtonItem class implements the functionality of an individual item displayed in a drop-down list of a DxDropDownButton or DxSplitButton component. Use the Items property to manage the component’s item collection.

DxDropDownButton - Item Collection

Run Demo: Drop-Down Button - Items

#Item Appearance

Use the following API members to customize the drop-down button item’s appearance:

Text
Specifies the item text.
Tooltip
Specifies the item’s tooltip text.
CssClass
Assigns a CSS class to the item.
IconCssClass | IconPosition
Customize the item’s icon.

DxDropDownButton - Item Appearance Customization

<DxDropDownButton RenderStyle="ButtonRenderStyle.Secondary"
                  Text="Clipboard"
                  IconCssClass="tb-icon tb-icon-paste"
                  CssClass="me-1">
    <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" />
    </Items>
</DxDropDownButton>

Use the item’s Enabled property to specify whether the item is enabled. To hide the item, set its Visible property to false.

#Item Groups

You can display horizontal lines within the menu to separate items into groups. To start a new group, set the item’s BeginGroup property to true.

DxDropDownButton - Item Separator

Razor
<DxDropDownButton RenderStyle="ButtonRenderStyle.Secondary"
                  Text="Clipboard"
                  IconCssClass="tb-icon tb-icon-paste"
                  CssClass="me-1">
    <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>

Use the NavigateUrl property to specify a URL where the web browser navigates when the drop-down list item is clicked. To specify where the browser should open the URL (for example, the current window or a new tab), use the Target property.

The following code snippet opens the Documentation item’s NavigateUrl link in the same tab and the Demos item’s link in a new tab:

DxDropDownButton - Navigation Location

Razor
<DxDropDownButton Text="Blazor Components"
                  RenderStyleMode="ButtonRenderStyleMode.Outline" >
    <Items>
        <DxDropDownButtonItem Text="Documentation"
                              NavigateUrl="https://docs.devexpress.com/Blazor/400725/blazor-components" />
        <DxDropDownButtonItem Text="Demos"
                              NavigateUrl="https://demos.devexpress.com/blazor/"
                              Target="_blank" />
    </Items>
</DxDropDownButton>

#Items with Drop-Down Elements

Drop-down button items can display drop-down menus or windows with custom content. Such items display the drop-down toggle icon. You can use the DropDownToggleCssClass property to customize the toggle’s appearance. To hide the toggle icon, set the DropDownToggleVisible property to false.

The DxDropDownButtonItem component allows you to configure settings of the item’s drop-down element. The following properties are available:

DropDownCssClass
Assigns a CSS class to the item’s drop-down element.
DropDownPosition
Positions the drop-down element relative to the item.

Populate the item’s <Items>...</Items> tag with DxDropDownButtonItem objects to create a nested menu:

Razor
<DxDropDownButton RenderStyle="ButtonRenderStyle.Secondary"
                  Text="Clipboard"
                  IconCssClass="tb-icon tb-icon-paste"
                  CssClass="me-1">
    <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>

DxDropDownButton - Item Collection

Use the item’s DropDownContentTemplate property to display custom content within the item’s drop-down window.

DxDropDownButtonItem - Custom DropDown Content

Razor
<DxDropDownButton Text="Blazor Components"
                  RenderStyle="ButtonRenderStyle.Secondary">
    <Items>
        <DxDropDownButtonItem Text="Documentation" />
        <DxDropDownButtonItem Text="Demos" />
        <DxDropDownButtonItem Text="Click to search">
            <DropDownContentTemplate>
                <div class="d-flex flex-row align-items-center h-100">
                    <DxSearchBox CssClass="search py-0" aria-label="Search" />
                </div>
            </DropDownContentTemplate>
        </DxDropDownButtonItem>
    </Items>
</DxDropDownButton>

#Handle Item Clicks

Handle the item’s Click event to react to item clicks. You can also use the DxDropDownButton.ItemClick or DxSplitButton.ItemClick event to specify a common click handler for all menu items.

Razor
@inject IJSRuntime JSRuntime

<p>The clicked item is @ClickedItem</p>

<DxDropDownButton RenderStyle="ButtonRenderStyle.Secondary"
                  Text="Clipboard"
                  IconCssClass="tb-icon tb-icon-paste"
                  CssClass="me-1"
                  ItemClick="@OnItemCommonClick">
    <Items>
        <DxDropDownButtonItem Text="Cut"
                              IconCssClass="menu-icon-cut menu-icon"
                              Click="@OnCutItemClick" />
        <DxDropDownButtonItem Text="Copy"
                              IconCssClass="menu-icon-copy menu-icon"
                              Click="@OnCopyItemClick" />
        <DxDropDownButtonItem Text="Paste"
                              IconCssClass="tb-icon tb-icon-paste" />
    </Items>
</DxDropDownButton>

@code {
    public string ClickedItem { get; set; } = "";

    void OnCutItemClick(MouseEventArgs args) {
        ClickedItem = "Cut";
    }
    void OnCopyItemClick(MouseEventArgs args) {
        ClickedItem = "Copy";
    }

    async Task OnItemCommonClick(DropDownButtonItemClickEventArgs args) {
        await JSRuntime.InvokeVoidAsync("alert", $"The drop-down button item has been clicked.");
    }
}
See Also