Dropdown component

Basics

The dropdown component is a container for a dropdown button and a dropdown 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
<Dropdown>
    <DropdownToggle Color="Color.Primary">
        Dropdown
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown>

Split dropdown

Just add another Button to have a split dropdown.

<Dropdown>
    <Button>Split Dropdown</Button>
    <DropdownToggle IsSplit="true"/>
    <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown>

Usage

By default a dropdown toggle will open and close a dropdown menu without the need to do it manually. In case you need to control the menu programatically you have to use the Dropdown reference.

<Dropdown @ref="dropdown">
    <DropdownToggle />
    <DropdownMenu>
        ...
    </DropdownMenu>
</Dropdown>

<Button Clicked="@ShowMenu">Show Menu</Button>
@code{
    Dropdown dropdown;

    void ShowMenu()
    {
        dropdown.Open();
    }
}

Functions

Name Description
Open() Open the dropdown menu.
Close() Close the dropdown menu.
Toggle() Switches the visibility of dropdown menu.

Attributes

Name Type Default Description
IsOpen boolean false Handles the visibility of dropdown menu.
IsRightAligned boolean false Right aligned dropdown menu.
Direction Direction Down Direction of an dropdown menu.
Toggled event   Occurs after the dropdown menu visibility has changed.
Name Type Default Description
IsRightAligned boolean false Right aligned dropdown menu.
Name Type Default Description
Value object null Holds the item value.
Clicked event   Occurs when the item is clicked.
Name Type Default Description
Color Colors None Component visual or contextual style variants.
Size ButtonSize None Button size variations.
IsSplit boolean false Handles the visibility of split button.
IsOutline boolean false Outlined button