Documentation Components Dropdown
Blazorise Dropdown component
Dropdowns expose additional content that "drops down" in a menu.
Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.
Dropdowns are designed to work well with menus to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. color picker and select). The API gives you complete control over showing, hiding, and positioning the menu.
Dropdown
the main container
< DropdownToggle>
toggle button
< DropdownMenu>
the toggable menu, hidden by default
< DropdownItem>
each single item of the dropdown menu
< DropdownDivider>
a horizontal line to separate dropdown items
< DropdownHeader>
a label for a section of items
< Dropdown >
< DropdownToggle Color = " Color .Primary " >
Dropdown
</ DropdownToggle >
< DropdownMenu >
< DropdownItem > Action</ DropdownItem >
< DropdownDivider />
< DropdownItem > Another Action</ DropdownItem >
</ DropdownMenu >
</ Dropdown >
< Dropdown >
< Button Color = " Color .Primary " > Split Dropdown</ Button >
< DropdownToggle Color = " Color .Primary " Split />
< DropdownMenu >
< DropdownItem > Action</ DropdownItem >
< DropdownDivider />
< DropdownItem > Another Action</ DropdownItem >
</ DropdownMenu >
</ Dropdown >
< Dropdown @ ref= " dropdown " Display = " Display .InlineBlock " >
< DropdownToggle Color = " Color .Primary " > Menu</ DropdownToggle >
< DropdownMenu >
< DropdownItem > Action</ DropdownItem >
< DropdownDivider />
< DropdownItem > Another Action</ DropdownItem >
</ DropdownMenu >
</ Dropdown >
< Button Clicked = " @ ShowMenu" Color = " Color .Secondary " > Show Menu</ Button >
@ code {
Dropdown dropdown;
Task ShowMenu()
{
return dropdown.Show();
}
}
< Dropdown Display = " Display .InlineBlock " >
< DropdownToggle Color = " Color .Primary " > Menu</ DropdownToggle >
< DropdownMenu MaxMenuHeight = " 100px " >
< DropdownItem > Action</ DropdownItem >
< DropdownItem > Action 2</ DropdownItem >
< DropdownItem > Action 3</ DropdownItem >
< DropdownDivider />
< DropdownItem > Another Action</ DropdownItem >
< DropdownItem > Another Action 2</ DropdownItem >
</ DropdownMenu >
</ Dropdown >
< Dropdown >
< DropdownToggle Color = " Color .Primary " > Level 1</ DropdownToggle >
< DropdownMenu >
< DropdownItem > Item 1.1</ DropdownItem >
< Dropdown >
< DropdownToggle > Level 2</ DropdownToggle >
< DropdownMenu >
< DropdownItem > Item 2.1</ DropdownItem >
< DropdownItem > Item 2.2</ DropdownItem >
< Dropdown >
< DropdownToggle > Level 3</ DropdownToggle >
< DropdownMenu >
< DropdownItem > Item 3.1</ DropdownItem >
< DropdownItem > Item 3.2</ DropdownItem >
< Dropdown >
< DropdownToggle > Level 4</ DropdownToggle >
< DropdownMenu >
< DropdownItem > Item 4.1</ DropdownItem >
< DropdownItem > Item 4.2</ DropdownItem >
</ DropdownMenu >
</ Dropdown >
</ DropdownMenu >
</ Dropdown >
</ DropdownMenu >
</ Dropdown >
</ DropdownMenu >
</ Dropdown >
< Dropdown >
< DropdownToggle Color = " Color .Primary " > Level 1</ DropdownToggle >
< DropdownMenu >
< DropdownItem > Item 1.1</ DropdownItem >
< Dropdown Direction = " Direction .Up " >
< DropdownToggle > Level 2</ DropdownToggle >
< DropdownMenu >
< DropdownItem > Item 2.1</ DropdownItem >
< DropdownItem > Item 2.2</ DropdownItem >
< Dropdown Direction = " Direction .Down " >
< DropdownToggle > Level 3</ DropdownToggle >
< DropdownMenu >
< DropdownItem > Item 3.1</ DropdownItem >
< DropdownItem > Item 3.2</ DropdownItem >
< Dropdown Direction = " Direction .Start " >
< DropdownToggle > Level 4</ DropdownToggle >
< DropdownMenu >
< DropdownItem > Item 4.1</ DropdownItem >
< DropdownItem > Item 4.2</ DropdownItem >
</ DropdownMenu >
</ Dropdown >
</ DropdownMenu >
</ Dropdown >
</ DropdownMenu >
</ Dropdown >
</ DropdownMenu >
</ Dropdown >
Best Practices
Dropdown should not be used for navigation. Use tabs for switching between content, or anchor elements for regular navigation.
Dropdown is not an input field. Use Select , or Radio Button instead.
Functions
Name
Description
Show()
Show the dropdown menu.
Hide()
Hides the dropdown menu.
Toggle()
Switches the visibility of dropdown menu.
API
Attributes
Dropdown Name
Description
Type
Default
Visible
Handles the visibility of dropdown menu.
bool
false
RightAligned
Right aligned dropdown menu.
bool
false
Disabled
Disables the button or toggle button that are placed inside of dropdown.
bool
false
Direction
Direction of an dropdown menu.
Direction
Default
VisibleChanged
Occurs after the dropdown menu visibility has changed.
EventCallback
DropdownMenu Name
Description
Type
Default
MaxMenuHeight
Sets the maximum height of the dropdown menu.
string
DropdownItem Name
Description
Type
Default
Value
Holds the item value.
object
null
Clicked
Occurs when the item is clicked.
EventCallback
Active
Marks the item with an state.
bool
false
Disabled
Marks the item with disabled state and doesn’t allow the click event.
bool
false
DropdownToggle Name
Description
Type
Default
Color
Component visual or contextual style variants.
Colors
Default
Size
Button size variations.
Size
Default
Split
Handles the visibility of split button.
bool
false
Outline
Outlined button
bool
false
Disabled
Makes toggle look inactive.
bool
false