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

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 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 Default
VisibleChanged Occurs after the dropdown menu visibility has changed. EventCallback
PositionStrategy Defines the positioning strategy of the dropdown menu as a 'floating' element. DropdownPositionStrategy DropdownPositionStrategy.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 Type Default
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
ShowCheckbox The dropdown renders a checkbox. bool false
Checked Tracks the Checked state whenever the DropdownItem is in checkbox mode. bool false
CheckedChanged Occurs after the Checked state is changed, whenever the DropdownItem is in checkbox mode. EventCallback<bool>

DropdownToggle

Name Description Type Default
Color Component visual or contextual style variants. Colors Default
Size Button size variations. Size Default
Split Handles the visibility of split button. bool false
Outline Outlined button bool false
Disabled Makes toggle look inactive. bool false
On this page