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

Attributes

Dropdown

Name Description TypeDefault
Visible Handles the visibility of dropdown menu. boolfalse
RightAligned Right aligned dropdown menu. boolfalse
Disabled Disables the button or toggle button that are placed inside of dropdown. boolfalse
Direction Direction of an dropdown menu. DirectionDefault
VisibleChanged Occurs after the dropdown menu visibility has changed. EventCallback
PositionStrategy Defines the positioning strategy of the dropdown menu as a 'floating' element. DropdownPositionStrategyDropdownPositionStrategy.Fixed
DropdownMenuTargetId Provides a 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

DropdownMenu

Name Description TypeDefault
MaxMenuHeight Sets the maximum height of the dropdown menu. string

DropdownItem

Name Description TypeDefault
Value Holds the item value. objectnull
Clicked Occurs when the item is clicked. EventCallback
Active Marks the item with an state. boolfalse
Disabled Marks the item with disabled state and doesn’t allow the click event. boolfalse
ShowCheckbox The dropdown renders a checkbox. boolfalse
Checked Tracks the Checked state whenever the DropdownItem is in checkbox mode. boolfalse
CheckedChanged Occurs after the Checked state is changed, whenever the DropdownItem is in checkbox mode. EventCallback<bool>

DropdownToggle

Name Description TypeDefault
Color Component visual or contextual style variants. ColorsDefault
Size Button size variations. SizeDefault
Split Handles the visibility of split button. boolfalse
Outline Outlined button boolfalse
Disabled Makes toggle look inactive. boolfalse
On this page