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>
    <SimpleButton>Split Dropdown</SimpleButton>
    <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>

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

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