Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.

  • 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

<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 Color="Color.Primary">Split Dropdown</Button>
    <DropdownToggle Color="Color.Primary" Split="true" />
    <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown>

Show Menu

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" 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();
    }
}

Scrollable Menu

By default the menu will show all items. If you want to add the scrolling to the menu you just need to define the menu MaxMenuHeight parameter.
<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>

Nested submenus

By adding a few more Dropdowns you can add extra levels of submenu to your dropdown. You can apply this to the dropdown in a simple button or within the navbar.
<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>

Functions

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

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 Down
VisibleChanged Occurs after the dropdown menu visibility has changed. EventCallback

DropdownMenu

Name Description Type Default
RightAligned Right aligned dropdown menu. bool false
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 None
Size Button size variations. Size None
Split Handles the visibility of split button. bool false
Outline Outlined button bool false
Disabled Makes toggle look inactive. bool false