Drop Down Button

• Aug 21, 2026
• 3 minutes to read

DropDownButton is a UI component that can display a list of actions. You can configure the component to trigger actions on button or list item click.

Run Demo: DropDownButton Read Tutorial

Getting Started

The DropDownButton UI Control is based on the DevExtreme DropDownButton component.

The following help topics explain how to add this control to your project:

• Add DevExtreme to a Visual Studio Project or Configure a non Visual Studio Project
• Add Controls to a Project
• Razor Syntax

Basic Syntax

DropDownButtonBasics.cshtml

@(Html.DevExtreme().DropDownButton()
    .Text("Select an Item")
    .Items(i => {
        i.Add().Text("Item 1");
        i.Add().Text("Item 2");
        i.Add().Text("Item 3");
    })
)

DropDownButtonController.cs

using Microsoft.AspNetCore.Mvc;

namespace ASP_NET_Core.Controllers {
    public class DropDownButtonController : Controller {
        public IActionResult GettingStarted() {
            return View();
        }
    }
}

Built-in Capabilities and Configuration Guides

• Action Binding
  DropDownButton can trigger actions on button click (onButtonClick) or list item click (onItemClick). You can also specify individual click handlers for each item within the component data source.

• Appearance Settings
  You can specify an icon and text, as well as configure drop-down arrow visibility to customize component appearance.

• Item Configuration
  You can configure text, icons, and badges to customize drop-down item appearance. The component also allows you to implement unique click handlers for each item, as well as custom templates.

• Split Button Support
  DevExtreme DropDownButton supports a split button mode. In this mode, the component separates the action and drop-down buttons.

• Predefined Styling Modes
  You can choose one of three styling modes to configure DropDownButton appearance: text only, contained, and outlined (default). The component also includes four built-in colors.

• Selection
  When selection is enabled, the component displays the selected item text and icon. You can handle selection change and process selected item data at runtime.

• Accessibility and Keyboard Navigation
  DropDownButton conforms to WCAG 2.x, European Accessibility Act (EAA), and Americans with Disabilities Act (ADA) standards. The component supports keyboard navigation and custom key handlers. TagBox also ships with right-to-left (RTL) representation support.

• Custom Templates
  DropDownButton supports custom markup for the component action button and the drop-down content. You can also specify custom templates for specific drop-down items or a common template for all items.

API

Server-Side API

Initialization

Call the DropDownButton() method to create a DropDownButton control. This action initializes a DropDownButtonBuilder instance. Use the instance methods to specify DropDownButton options and event handlers.

Options

For a complete option list, see DropDownButtonBuilder Members. For details on how to specify control options, refer to the following help topic: Specify Options.

Events

For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

Options

If you need to specify the DropDownButton options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme DropDownButton options.

Methods

For a list of available methods, see DevExtreme DropDownButton methods. For details on how to call methods, refer to the following help topic: Call Methods.

Demos

Run Demo: DropDownButton