Blazorise Dropdown component

Keep related links and actions together in a menu that opens on demand.

Use the Dropdown component for action menus, navigation choices, or controls with additional options.

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.

Structure

A Dropdown combines a toggle with a menu. The menu can contain clickable items, dividers, and headings.

  • <Dropdown>Coordinates the toggle and menu.
    • <DropdownToggle>Opens or closes the menu.
    • <DropdownMenu>Contains the menu content; hidden until opened.
      • <DropdownItem>A clickable link or action.
      • <DropdownDivider>Separates groups of items.
      • <DropdownHeader>A heading for a group of items.

Examples

Dropdown

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

Ghost toggleAdded in v2.4

Use Ghost for a transparent, borderless dropdown toggle with visible hover, keyboard focus, and expanded menu states. Choose a theme variant, such as Color.Primary or Color.Danger. Ghost takes precedence over Outline. 
<Dropdown>
    <DropdownToggle Ghost Color="Color.Primary">Actions</DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Open</DropdownItem>
        <DropdownItem>Save</DropdownItem>
    </DropdownMenu>
</Dropdown>

Toggle icon visibility

Use the ShowToggleIcon parameter to control whether the dropdown toggle displays its indicator icon. 
<Dropdown>
    <DropdownToggle Color="Color.Primary" ShowToggleIcon="false">
        Dropdown without toggle icon
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown>

Custom colorsAdded in v2.3

Use custom CSS colors for dropdown toggles and matching split buttons. 
<Div Flex="Flex.Wrap.AlignItems.Center" Gap="Gap.Is2">
    <Dropdown>
        <DropdownToggle Color="@("#DBB5E6")">Lavender</DropdownToggle>
        <DropdownMenu>
            <DropdownItem>Edit</DropdownItem>
            <DropdownItem>Duplicate</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <DropdownToggle Color="@("rgb(14, 165, 233)")" Outline>Sky outline</DropdownToggle>
        <DropdownMenu>
            <DropdownItem>Edit</DropdownItem>
            <DropdownItem>Duplicate</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <Button Color="@(new Color("#312E81"))">Save</Button>
        <DropdownToggle Color="@(new Color("#312E81"))" Split />
        <DropdownMenu>
            <DropdownItem>Save as draft</DropdownItem>
            <DropdownItem>Save a copy</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</Div>

Dropdown checkboxes

Set ShowCheckbox to true to render a checkbox by each dropdown item. Use Indeterminate to show a partial selection, such as when some but not all options are selected. Calculate this state from your selections and update it through CheckedChanged; it does not change Checked automatically. 
<Dropdown>
    <DropdownToggle Color="Color.Primary">
        Dropdown With Checkboxes
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem ShowCheckbox Checked="@IsAllSelected" Indeterminate="@IsPartiallySelected" CheckedChanged="@OnSelectAllChangedHandler">Select all</DropdownItem>
        <DropdownDivider />
        <DropdownItem ShowCheckbox @bind-Checked="firstSelected">First option</DropdownItem>
        <DropdownItem ShowCheckbox @bind-Checked="secondSelected">Second option</DropdownItem>
        <DropdownItem ShowCheckbox Disabled>Checkbox Disabled</DropdownItem>
        <DropdownItem>Action</DropdownItem>
    </DropdownMenu>
</Dropdown>

@code {
    private bool firstSelected = true;

    private bool secondSelected;

    private bool IsAllSelected => firstSelected && secondSelected;

    private bool IsPartiallySelected => firstSelected != secondSelected;

    private void OnSelectAllChangedHandler( bool isChecked )
    {
        firstSelected = isChecked;
        secondSelected = isChecked;
    }
}

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>

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

AnimationAdded in v2.4

Set Animated="false" for immediate changes, or use AnimationDuration to adjust the duration in milliseconds. A null duration preserves the provider's default; zero or a negative value disables animations. These settings control the provider's existing animations, so providers that show this component immediately keep that behavior. 
<Field>
    <Switch @bind-Value="animated">Animate transitions</Switch>
</Field>
<Field>
    <FieldLabel>Animation duration</FieldLabel>
    <FieldBody>
        <Select TValue="int?" @bind-Value="animationDuration">
            <SelectItem TValue="int?" Value="@((int?)null)">Provider default</SelectItem>
            <SelectItem TValue="int?" Value="0">Immediate</SelectItem>
            <SelectItem TValue="int?" Value="100">100 ms</SelectItem>
            <SelectItem TValue="int?" Value="200">200 ms</SelectItem>
            <SelectItem TValue="int?" Value="400">400 ms</SelectItem>
            <SelectItem TValue="int?" Value="1000">1000 ms</SelectItem>
        </Select>
    </FieldBody>
</Field>

<Dropdown Animated="@animated" AnimationDuration="@animationDuration">
    <DropdownToggle Color="Color.Primary">Machine settings</DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Operating mode</DropdownItem>
        <DropdownItem>Production speed</DropdownItem>
        <DropdownItem>Maintenance schedule</DropdownItem>
    </DropdownMenu>
</Dropdown>

@code {
    private bool animated = true;

    private int? animationDuration;
}

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

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page