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> the button that toggles the dropdown menu.

    • <DropdownMenu> the container for the dropdown menu. Hidden by default.

      • <DropdownItem> a clickable item in the dropdown menu.

      • <DropdownDivider> a horizontal line to separate dropdown items.

      • <DropdownHeader> a non-clickable header in the dropdown menu.

Dropdown

<Dropdown>
    <DropdownToggle Color="Color.Primary">
        Dropdown
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown>

Dropdown checkboxes

Set Checkbox to true to render a checkbox by each dropdown item. 
<Dropdown>
    <DropdownToggle Color="Color.Primary">
        Dropdown With Checkboxes
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem ShowCheckbox>Checkbox</DropdownItem>
        <DropdownDivider />
        <DropdownItem ShowCheckbox>Another Checkbox</DropdownItem>
        <DropdownItem ShowCheckbox Disabled>Checkbox Disabled</DropdownItem>
        <DropdownItem>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 />
    <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>

Nested submenus with direction

Nested dropdowns with the manual Direction is also supported. 
<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

Parameters

Dropdown

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this Dropdown.

 RenderFragmentnull
Direction

Dropdown-menu slide direction.

Possible values:Default, Down, Up, End, Start

 DirectionDirection.Default
Disabled

If true, dropdown would not react to button click.

 boolfalse
DropdownMenuTargetId

Provides an alternative, or custom anchor element id for the dropdown menu.

This is useful when you want the dropdown menu to be anchored from a different element than the toggle.

 string
PositionStrategy

Defines the positioning strategy of the dropdown menu as a 'floating' element.

Possible values:Absolute, Fixed

 DropdownPositionStrategyDropdownPositionStrategy.Fixed
RightAligned

If true, a dropdown menu will be right aligned.

 boolfalse
Visible

If true, a dropdown menu will be visible.

 boolfalse

DropdownMenu

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this Container.

 RenderFragmentnull
MaxMenuHeight

Sets the maximum height of the dropdown menu.

 string

DropdownItem

Parameter Description TypeDefault
Active

Indicate the currently active item.

 boolfalse
Checked

Tracks the Checked state whenever the DropdownItem is in checkbox mode.

 boolfalse
ChildContent

Specifies the content to be rendered inside this DropdownItem.

 RenderFragmentnull
Disabled

Indicate the currently disabled item.

 boolfalse
ShowCheckbox

The dropdown renders a checkbox.

 boolfalse
Value

Holds the item value.

 objectnull

DropdownToggle

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this DropdownToggle.

 RenderFragmentnull
Color

Gets or sets the dropdown color.

 ColorColor.Default
Disabled

Makes the toggle element look inactive.

 boolfalse
Outline

Button outline.

 boolfalse
Size

Gets or sets the dropdown size.

 Size?null
Split

Indicates that a toggle should act as a split button.

 boolfalse
TabIndex

If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.

 int?null
ToggleIconVisible

Gets or sets a value indicating whether the dropdown toggle icon is visible.

Remarks

Default: True

 bool?null

Events

Dropdown

Event Description Type
VisibleChanged

Occurs after the dropdown menu visibility has changed.

 EventCallback<bool>

DropdownItem

Event Description Type
CheckedChanged

Occurs after the Checked state is changed, whenever the DropdownItem is in checkbox mode.

 EventCallback<bool>
Clicked

Occurs when the item is clicked.

 EventCallback<object>

DropdownToggle

Event Description Type
Clicked

Occurs when the toggle button is clicked.

 EventCallback<MouseEventArgs>

Methods

Dropdown

Method DescriptionReturnParameters
Show Show the dropdown menu. Task
Hide Hide the dropdown menu. Taskbool hideAll
Toggle Toggle the visibility of the dropdown menu. Taskstring dropdownToggleElementId

DropdownToggle

Method DescriptionReturnParameters
IsSafeToClose Returns true of the parent dropdown-menu is safe to be closed. Task<bool>string elementId, CloseReason closeReason, bool isChildClicked
Close Forces the parent dropdown to close the dropdown-menu. TaskCloseReason closeReason
Focus Sets focus on the input element, if it can be focused. Taskbool scrollToElement
On this page