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 Color="DropdownColor.Secondary">
    <DropdownToggleButton>Dropdown button</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

Color#

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

Split button#

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

Sizing#

Razor

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

Razor

<div class="d-flex gap-2 mb-4">
    <Dropdown Color="DropdownColor.Secondary" Size="DropdownSize.Small">
        <DropdownToggleButton>Small button</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Secondary" Size="DropdownSize.Small" Split="true">
        <DropdownActionButton>Small split button</DropdownActionButton>
        <DropdownToggleButton />
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.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 Color="DropdownColor.Secondary" Direction="DropdownDirection.Dropup">
        <DropdownToggleButton>Dropup button with text</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Secondary" Direction="DropdownDirection.Dropup" Split="true">
        <DropdownActionButton>Dropup split button</DropdownActionButton>
        <DropdownToggleButton />
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.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 Color="DropdownColor.Secondary" Direction="DropdownDirection.DropupCentered">
        <DropdownToggleButton>Centered dropup</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.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 Color="DropdownColor.Secondary" Direction="DropdownDirection.Dropend">
        <DropdownToggleButton>Dropend</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>

    <Dropdown Color="DropdownColor.Secondary" Direction="DropdownDirection.Dropend" Split="true">
        <DropdownActionButton>Split dropend</DropdownActionButton>
        <DropdownToggleButton />
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.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 Color="DropdownColor.Secondary" Direction="DropdownDirection.Dropstart">
        <DropdownToggleButton>Dropstart</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Color="DropdownColor.Secondary" Direction="DropdownDirection.Dropstart" Split="true">
        <DropdownToggleButton />
        <DropdownMenu>
            <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        </DropdownMenu>
        <DropdownActionButton>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 Color="DropdownColor.Secondary">
    <DropdownToggleButton>Dropstart</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link" Active="true">Another action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

Disabled#

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

Razor

<Dropdown Color="DropdownColor.Secondary" Disabled="@isDropdownDisabled">
    <DropdownToggleButton>Dropstart</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

<div class="mt-3">
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="EnableDropdown">Enable</Button>
    <Button Color="ButtonColor.Danger" Size="ButtonSize.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 Color="DropdownColor.Secondary">
    <DropdownToggleButton>Dropstart</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link" Disabled="true">Another action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.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 Color="DropdownColor.Secondary">
    <DropdownToggleButton>Right-aligned menu example</DropdownToggleButton>
    <DropdownMenu Position="DropdownMenuPosition.End">
        <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

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

Razor

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

Dividers#

Separate groups of related menu items with a divider.

Razor

<Dropdown Color="DropdownColor.Secondary">
    <DropdownToggleButton>Dropdown</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Something else here</DropdownItem>
        <DropdownDivider>Dropdown header</DropdownDivider>
        <DropdownItem To="#" Type="DropdownItemType.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 Color="DropdownColor.Secondary">
    <DropdownToggleButton>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 Color="DropdownColor.Secondary">
    <DropdownToggleButton>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 Color="DropdownColor.Secondary" AutoClose="true">
    <DropdownToggleButton>Default dropdown</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
    </DropdownMenu>
</Dropdown>

<Dropdown Color="DropdownColor.Secondary" AutoClose="true" AutoCloseBehavior="DropdownAutoCloseBehavior.Outside">
    <DropdownToggleButton>Clickable outside</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
    </DropdownMenu>
</Dropdown>

<Dropdown Color="DropdownColor.Secondary" AutoClose="true" AutoCloseBehavior="DropdownAutoCloseBehavior.Inside">
    <DropdownToggleButton>Clickable inside</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
    </DropdownMenu>
</Dropdown>

<Dropdown Color="DropdownColor.Secondary" AutoClose="false">
    <DropdownToggleButton>Manual close</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.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" Color="DropdownColor.Secondary">
    <DropdownToggleButton>Dropdown button</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.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 Color="DropdownColor.Secondary"
          OnHiding="OnDropdownHidingAsync"
          OnHidden="OnDropdownHiddenAsync"
          OnShowing="OnDropdownShowingAsync"
          OnShown="OnDropdownShownAsync">
    <DropdownToggleButton>Dropdown button</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="DropdownItemType.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 v3.0.0-preview.3.

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