Our Blazor Drop-Down Button can be toggled and includes a drop-down UI element. The drop-down UI element can display a command list or custom content.
Drop-Down Button APIs include the following key members:
- Text — Specifies button text.
- CssClass — Specifies the name of the button's CSS class.
- RenderStyle — Specifies the button's render style.
- RenderStyleMode — Applies the desired render style to the button.
- Enabled — Specifies whether the button is enabled.
- Tooltip — Specifies the button's tooltip text.
- Items — Specifies drop-down button items.
The Drop-Down Button component also supports different size modes. To specify component size in code, use the SizeMode property.
Selected item:
The DevExpress Blazor Drop-Down Button component can display multi-level drop-down lists. Populate a command's Items property with DxDropDownButtonItem objects to create a nested menu.
Use the BeginGroup property to separate items into groups (at any nesting level).
Our Blazor Drop-Down Button component can also display icons within the main button and for drop-down list items. Use IconCssClass and IconPosition properties to configure icon settings.
Selected item: Nancy Davolio (Sales Representative)
The DevExpress Blazor Drop-Down Button component can display drop-down windows with custom content. Specify the DropDownContentTemplate property (at either the component or item level) to customize the layout and appearance of the corresponding drop-down window.
In this demo, the button's drop-down window contains a DxListBox component. When a user changes selection, the event handler closes the drop-down window and displays selected item information below the Drop-Down Button.