Blazor Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are toggled by clicking, not by hovering; this is an intentional design decision'by bootstrap.

Single button#

razor

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown button</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

Color#

<div class="d-flex gap-2 mb-4">
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Primary">Primary</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Secondary">Secondary</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Success">Success</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Info">Info</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Warning">Warning</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Danger">Danger</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

Split button#

<div class="d-flex gap-2 mb-4">
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Primary">Primary</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Primary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Secondary">Secondary</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Success">Success</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Success" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Info">Info</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Info" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Warning">Warning</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Warning" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Danger">Danger</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Danger" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

Sizing#

razor

<div class="d-flex gap-2 mb-4">
    <Dropdown Size="Size.Large">
        <DropdownToggleButton Color="ButtonColor.Secondary">Large button</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem Size="Size.Large" To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Size="Size.Large" Split="true">
        <DropdownActionButton Color="ButtonColor.Secondary">Large split button</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

razor

<div class="d-flex gap-2 mb-4">
    <Dropdown Size="Size.Small">
        <DropdownToggleButton Color="ButtonColor.Secondary">Small button</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Size="Size.Small" Split="true">
        <DropdownActionButton Color="ButtonColor.Secondary">Small split button</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

Directions#

Dropup#

To trigger DropdownMenu above elements, add the Direction="DropdownDirection.Dropup" to the Dropdown component.

razor

<div class="d-flex gap-2">
    <Dropdown Direction="DropdownDirection.Dropup">
        <DropdownToggleButton Color="ButtonColor.Secondary">Dropup button with text</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Direction="DropdownDirection.Dropup" Split="true">
        <DropdownActionButton Color="ButtonColor.Secondary">Dropup split button</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

Dropup centered#

To center the DropdownMenu above the toggle, add the Direction="DropdownDirection.DropupCentered" to the Dropdown component.

razor

<div class="d-flex gap-2">
    <Dropdown Direction="DropdownDirection.DropupCentered">
        <DropdownToggleButton Color="ButtonColor.Secondary">Centered dropup</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

Dropend#

To trigger DropdownMenu at the right of elements, add the Direction="DropdownDirection.Dropend" to the Dropdown component.

razor

<div class="d-flex gap-2">
    <Dropdown Direction="DropdownDirection.Dropend">
        <DropdownToggleButton Color="ButtonColor.Secondary">Dropend</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Direction="DropdownDirection.Dropend" Split="true">
        <DropdownActionButton Color="ButtonColor.Secondary">Split dropend</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

Dropstart#

To trigger DropdownMenu at the left of elements, you can add the Direction="DropdownDirection.Dropstart" to the Dropdown component.

razor

<div class="d-flex gap-2">
    <Dropdown Direction="DropdownDirection.Dropstart">
        <DropdownToggleButton Color="ButtonColor.Secondary">Dropstart</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Direction="DropdownDirection.Dropstart" Split="true">
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
        <DropdownActionButton Color="ButtonColor.Secondary">Split dropstart</DropdownActionButton>
    </Dropdown>
</div>

Active#

To style DropdownItem as active, add the Active="true" parameter to the DropdownItem element in the DropdownMenu.

razor

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropstart</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link" Active="true">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

Disabled#

To disable the dropdown, set the Disabled parameter to true on the Dropdown component.

razor

<Dropdown Disabled="@isDropdownDisabled">
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropstart</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

<div class="mt-3">
    <Button Color="ButtonColor.Primary" Size="Size.Small" @onclick="EnableDropdown">Enable</Button>
    <Button Color="ButtonColor.Danger" Size="Size.Small" @onclick="DisableDropdown">Disable</Button>
</div>
@code
{
    private bool isDropdownDisabled = true;
    private void EnableDropdown() => isDropdownDisabled = false;
    private void DisableDropdown() => isDropdownDisabled = true;
}

To style a dropdown item as disabled, set the Disabled parameter to true on the DropdownItem element in the DropdownMenu component.

razor

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropstart</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link" Disabled="true">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

By default, a DropdownMenu is automatically positioned at 100% from the top and along the left side of its parent. You can change this with the Position parameter.

To right-align a DropdownMenu, add the Position="DropdownMenuPosition.End" parameter to the DropdownMenu component. Directions are mirrored when using Bootstrap in RTL.

razor

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Right-aligned menu example</DropdownToggleButton>
    <DropdownMenu Position="DropdownMenuPosition.End">
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

Add a header to label sections of actions in any dropdown menu.

razor

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown</DropdownToggleButton>
    <DropdownMenu>
        <DropdownHeader>Dropdown header</DropdownHeader>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

Dividers#

Separate groups of related menu items with a divider.

razor

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        <DropdownDivider>Dropdown header</DropdownDivider>
        <DropdownItem To="#" Type="ButtonType.Link">Separated link</DropdownItem>
    </DropdownMenu>
</Dropdown>

Text#

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that youll likely need additional sizing styles to constrain the menu width.

razor

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown</DropdownToggleButton>
    <DropdownMenu Class="p-4 text-muted" Style="width: 320px;">
        <p>Some example text that's free-flowing within the dropdown menu.</p>
        <p class="mb-0">And this is more example text.</p>
    </DropdownMenu>
</Dropdown>

Forms#

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

@using System.ComponentModel.DataAnnotations

<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown form</DropdownToggleButton>
    <DropdownMenu Class="px-4 py-3" Style="width:480px;">
        <EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
            <DataAnnotationsValidator />

            <div class="mb-3">
                <label class="form-label">Item Price: <span class="text-danger">*</span></label>
                <NumberInput TValue="decimal?" Value="invoice.Price" ValueExpression="() => invoice.Price" ValueChanged="(value) => PriceChanged(value)" Placeholder="Enter price" />
                <ValidationMessage For="@(() => invoice.Price)" />
            </div>

            <div class="mb-3">
                <label class="form-label">Item Discount:</label>
                <NumberInput TValue="decimal?" Value="invoice.Discount" ValueExpression="() => invoice.Discount" ValueChanged="(value) => DiscountChanged(value)" Placeholder="Enter discount" />
                <ValidationMessage For="@(() => invoice.Discount)" />
            </div>

            <div class="mb-3">
                <label class="form-label">Total Amount: <span class="text-danger">*</span></label>
                <NumberInput TValue="decimal?" @bind-Value="invoice.Total" Disabled="true" Placeholder="Enter total" />
                <ValidationMessage For="@(() => invoice.Total)" />
            </div>

            <div class="row">
                <div class="col-md-12 text-right">
                    <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
                    <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Submit</Button>
                </div>
            </div>
        </EditForm>
    </DropdownMenu>
</Dropdown>

@code {
    private Invoice invoice = new();
    private EditContext editContext = default!;

    protected override void OnInitialized()
    {
        editContext = new EditContext(invoice);
        base.OnInitialized();
    }

    protected override void OnParametersSet()
    {
        CalculateToatl();
        base.OnParametersSet();
    }

    private void PriceChanged(decimal? value)
    {
        invoice.Price = value;
        CalculateToatl();
    }

    private void DiscountChanged(decimal? value)
    {
        invoice.Discount = value;
        CalculateToatl();
    }

    private void CalculateToatl()
    {
        var price = invoice.Price.HasValue ? invoice.Price.Value : 0;
        var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0;
        invoice.Total = price - discount;
    }

    public void HandleOnValidSubmit()
    {
        Console.WriteLine($"Price: {invoice.Price}");
        Console.WriteLine($"Discount: {invoice.Discount}");
        Console.WriteLine($"Total: {invoice.Total}");
    }

    private void ResetForm()
    {
        invoice = new();
        editContext = new EditContext(invoice);
    }

    public class Invoice
    {
        [Required(ErrorMessage = "Price required.")]
        [Range(60, 500, ErrorMessage = "Price should be between 60 and 500.")]
        public decimal? Price { get; set; } = 232M;

        [Range(0, 50, ErrorMessage = "Discount should be between 0 and 50.")]
        public decimal? Discount { get; set; }

        [Required(ErrorMessage = "Amount required.")]
        [Range(10, 500, ErrorMessage = "Total should be between 60 and 500.")]
        public decimal? Total { get; set; }
    }
}

Auto close behavior#

By default, the DropdownMenu is closed when clicking either inside or outside the DropdownMenu. You can use the AutoClose and AutoCloseBehavior parameters to change this behavior of the Dropdown.

<Dropdown AutoClose="true">
    <DropdownToggleButton Color="ButtonColor.Secondary">Default dropdown</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
    </DropdownMenu>
</Dropdown>
<Dropdown AutoClose="true" AutoCloseBehavior="DropdownAutoCloseBehavior.Outside">
    <DropdownToggleButton Color="ButtonColor.Secondary">Clickable outside</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
    </DropdownMenu>
</Dropdown>
<Dropdown AutoClose="true" AutoCloseBehavior="DropdownAutoCloseBehavior.Inside">
    <DropdownToggleButton Color="ButtonColor.Secondary">Clickable inside</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
    </DropdownMenu>
</Dropdown>
<Dropdown AutoClose="false">
    <DropdownToggleButton Color="ButtonColor.Secondary">Manual close</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
    </DropdownMenu>
</Dropdown>

Methods#

Method	Description
`HideAsync`	Hides the dropdown menu of a given navbar or tabbed navigation.
`ShowAsync`	Shows the dropdown menu of a given navbar or tabbed navigation.
`ToggleAsync`	Toggles the dropdown menu of a given navbar or tabbed navigation.
`UpdateAsync`	Updates the position of an element’s dropdown.

<Dropdown @ref="dropdown1">
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown button</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

<Button Color="ButtonColor.Primary" @onclick="ShowAsync">Show</Button>
<Button Color="ButtonColor.Primary" @onclick="HideAsync">Hide</Button>
<Button Color="ButtonColor.Primary" @onclick="ToggleAsync">Toggle</Button>

@code{
    private Dropdown dropdown1 = default!;

    private async Task ShowAsync() => await dropdown1.ShowAsync();
    private async Task HideAsync() => await dropdown1.HideAsync();
    private async Task ToggleAsync() => await dropdown1.ToggleAsync();
}

Events#

All dropdown events are fired at the toggling element and then bubbled up.

Event type	Description
`OnHiding`	This event is fired immediately when the hide method has been called.
`OnHidden`	This event is fired when an dropdown element has been hidden from the user (will wait for CSS transitions to complete).
`OnShowing`	This event fires immediately when the show instance method is called.
`OnShown`	This event is fired when an dropdown element has been made visible to the user (will wait for CSS transitions to complete).

<Dropdown OnHiding="OnDropdownHidingAsync"
          OnHidden="OnDropdownHiddenAsync"
          OnShowing="OnDropdownShowingAsync"
          OnShown="OnDropdownShownAsync">
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown button</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

<div class="mt-3">
    @foreach (var item in messages)
    {
        <p>Event: @item</p>
    }
</div>

@code {
    List<string> messages = new List<string>();

    private void OnDropdownHidingAsync() => messages.Add(new("OnHiding"));

    private void OnDropdownHiddenAsync() => messages.Add(new("OnHidden"));

    private void OnDropdownShowingAsync() => messages.Add(new("OnShowing"));

    private void OnDropdownShownAsync() => messages.Add(new("OnShown"));
}

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor Bootstrap

Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
Code licensed Apache License 2.0.
Currently v2.2.1.

Blazor Dropdown

Single button#

Color#

Split button#

Sizing#

Directions#

Dropup#

Dropup centered#

Dropend#

Dropstart#

Active#

Disabled#

Menu position#

Menu content#

Header#

Dividers#

Text#

Forms#

Auto close behavior#

Methods#

Events#

Links

Guides

Community