Blazor DropDownButton Overview
The DropDownButton for Blazor is a combination of a button and a dropdown. It provides a collection of related user actions in a compact interface. The DropDownButton allows users to click the primary button and open the popup to choose from a list of additional actions.
The DropDownButton component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
DropDownButton vs. SplitButton
The DropDownButton and SplitButton components are similar. They both consist of a primary button and a dropdown element that holds additional action items. The major difference is the purpose of the primary button.
DropDownButton - The main purpose of the primary button is to open the popup with additional actions. The primary button does expose a separate
OnClickevent, so you can handle it to invoke a dedicated action but clicking on it always opens the dropdown.SplitButton - The main element contains a primary button and a separate button for opening the dropdown. The purpose of the primary button is to invoke a standalone action. Clicking on it does not open the dropdown. To open the popup with the additional actions, the user has to click the dedicated button with
caret-alt-downicon.
Creating Blazor DropDownButton
- Add a
<TelerikDropDownButton>tag. - (optional) Use the
Iconparameter of the<TelerikDropDownButton>tag to add an icon to the primary button. - (optional) Handle the
OnClickevent of the<TelerikDropDownButton>. - Define the primary button content in a child
<DropDownButtonContent>tag. The content can be plain text, HTML or even another component. - Add a child
<DropDownButtonItems>tag. This will hold the actions rendered in the dropdown. - Add the desired
<DropDownButtonItem>instances inside the<DropDownButtonItems>tag. Specify their content and icons and handle theirOnClickevents.
Basic DropDownButton
<TelerikDropDownButton Icon="@SvgIcon.Share" OnClick="@(()=>OnItemClick("Primary"))">
<DropDownButtonContent>Share</DropDownButtonContent>
<DropDownButtonItems>
<DropDownButtonItem Icon="@SvgIcon.Facebook" OnClick="@(()=>OnItemClick("Facebook"))">Facebook</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Twitter" OnClick="@(()=>OnItemClick("Twitter"))">Twitter</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Linkedin" OnClick="@(()=>OnItemClick("Linkedin"))">Linkedin</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Reddit" OnClick="@(()=>OnItemClick("Reddit"))">Reddit</DropDownButtonItem>
</DropDownButtonItems>
</TelerikDropDownButton>
@code {
private void OnItemClick(string item)
{
Console.WriteLine($"User clicked {item} option.");
}
}
Icons
The primary DropDownButton action and each secondary item in the dropdown can display an icon or an image for better looks and user experience.
Appearance
The DropDownButton provides a variety of settings to control its visual appearance, for example, the colors, borders, and size. This spares the need to use custom CSS code.
To learn more about the appearance, anatomy, and accessibility of the DropDownButton, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
Events
Each DropDownButton action fires a separate OnClick event so that the application can react to user behavior.
DropDownButton Parameters
The following table lists the DropDownButton parameters, except those related to built-in styling and icons. Also check the DropDownButton API Reference for a full list of properties, methods, and events.
| Parameter | Type and Default Value | Description |
|---|---|---|
AriaDescribedBy |
string |
Sets the aria-describedby attribute of the primary button element <button class="k-button">. |
AriaLabel |
string |
Sets the aria-label attribute of the primary button element <button class="k-button">. |
AriaLabelledBy |
string |
Sets the aria-labelledby attribute of the primary button element <button class="k-button">. |
Class |
string |
Renders a custom CSS class to the main component element <div class="k-dropdown-button">. Use it to override the theme styles and achieve a specific appearance if none of the DropDownButton appearance settings can do this. |
Enabled |
bool( true) |
Defines whether the primary button is enabled. |
Id |
string |
Sets the id attribute of the primary button element <button class="k-button">. |
ShowArrowButton |
bool |
Sets the visibility of the Arrow button that displays the popup of the component. |
TabIndex |
int |
Sets the tabindex attribute of the primary button element <button class="k-button">. |
Title |
string |
Sets the title attribute of the primary button element <button class="k-button">. |
Popup Settings
The DropDownButton exposes settings for its dropdown (popup). To configure the options, declare a <DropDownButtonPopupSettings> tag inside a <DropDownButtonSettings> tag:
<TelerikDropDownButton Icon="@SvgIcon.Share">
<DropDownButtonContent>Share</DropDownButtonContent>
<DropDownButtonSettings>
<DropDownButtonPopupSettings Height="auto" MaxHeight="100px"/>
</DropDownButtonSettings>
<DropDownButtonItems>
<DropDownButtonItem Icon="@SvgIcon.Facebook">Facebook</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Twitter">Twitter</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Linkedin">Linkedin</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Reddit">Reddit</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Pinterest">Pinterest</DropDownButtonItem>
</DropDownButtonItems>
</TelerikDropDownButton>
The DropDownButton provides the following popup settings:
| Parameter | Type | Description |
|---|---|---|
AnimationDuration |
int ( 300) |
Sets the dropdown animation duration in milliseconds. |
Class |
string |
Additional CSS class to customize the appearance of the popup. |
Height |
string |
The height of the popup. The default value is "200px". |
MinHeight |
string |
The minimum height of the popup. |
MinWidth |
string |
The minimum width of the popup. |
MaxHeight |
string |
The maximum height of the popup. |
MaxWidth |
string |
The maximum width of the popup. |
Width |
string |
The width of the popup. If you don't specify a value, the dropdown width will match the anchor element width which can help with responsive layouts and 100% widths. |
The parameters that modify the popup dimensions (Height, Width, MaxWidth, etc.) expect valid CSS values.
The MinHeight and MaxHeight have no effect if the Height is always within their range. The min and max values are useful only when the dropdown height is set to a relative unit or changes at runtime.
Item Settings
The following table lists the DropDownButtonItem parameters, except those related to icons.
| Parameter | Type and Default Value | Description |
|---|---|---|
Class |
string |
Renders a custom CSS class to the dropdown item's element, which is <li class="k-item k-menu-item">. |
Enabled |
bool( true) |
Defines whether the item is enabled. |
DropDownButton Reference and Methods
The DropDownButton exposes a FocusAsync method that allows you to focus it programmatically. To use it, define a reference to the component instance with the @ref attribute. Consider the Blazor life cycle if you want to focus the component on page load.
Get a reference to the DropDownButton and execute methods
<TelerikButton OnClick="@FocusDropDownButton">Focus DropDownButton</TelerikButton>
<TelerikDropDownButton @ref="@DropDownButtonRef" Icon="@SvgIcon.Share">
<DropDownButtonContent>Share</DropDownButtonContent>
<DropDownButtonItems>
<DropDownButtonItem Icon="@SvgIcon.Facebook">Facebook</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Twitter">Twitter</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Linkedin">Linkedin</DropDownButtonItem>
<DropDownButtonItem Icon="@SvgIcon.Reddit">Reddit</DropDownButtonItem>
</DropDownButtonItems>
</TelerikDropDownButton>
@code {
TelerikDropDownButton DropDownButtonRef;
async Task FocusDropDownButton()
{
await DropDownButtonRef.FocusAsync();
}
}