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
      • 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>

Split dropdown

Just add another Button to have a split dropdown.

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

Usage

By default a dropdown toggle will show and hide a dropdown menu without the need to do it manually. In case you need to control the menu programmatically 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.Show();
    }
}

Functions

Name Description
Show() Show the dropdown menu.
Hide() Hides the dropdown menu.
Toggle() Switches the visibility of dropdown menu.

Attributes

Name Type Default Description
Visible boolean false Handles the visibility of dropdown menu.
RightAligned boolean false Right aligned dropdown menu.
Disabled boolean false Disabled the button or toggle button that are placed inside of dropdown.
Direction Direction Down Direction of an dropdown menu.
Toggled event   Occurs after the dropdown menu visibility has changed.
Name Type Default Description
RightAligned 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.
Active boolean false Marks the item with an state.
Disabled boolean false Marks the item with disabled state and doesn’t allow the click event.
Name Type Default Description
Color Colors None Component visual or contextual style variants.
Size Size None Button size variations.
Split boolean false Handles the visibility of split button.
Outline boolean false Outlined button
Disabled boolean false Makes toggle look inactive.