Skip to main content

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.

Blazor Bootstrap: Dropdown component
NameTypeDescriptionRequiredDefaultAdded Version
AutoCloseboolEnables or disables the auto close.true1.10.0
AutoCloseBehaviorDropdownAutoCloseBehaviorGets or sets the auto close behavior of the dropdown.DropdownAutoCloseBehavior.Both1.10.0
ChildContentRenderFragmentSpecifies the content to be rendered inside the Dropdown.1.10.0
DirectionDropdownDirectionGets or sets the direction of the dropdown menu.DropdownDirection.Dropdown1.10.0
DisabledboolGets or sets whether the dropdown menu is disabled.false1.10.3
SizeSizeGets or sets the size of the dropdown.Size.None1.10.3
SplitboolGets or sets the toggle button split behavior.false1.10.0
NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside the DropdownToggleButton.1.10.0
ColorButtonColorGets or sets the button color.1.10.0
TabIndexint?If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.1.10.0
NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside the DropdownActionButton.1.10.0
ColorButtonColorGets or sets the button color.1.10.0
TabIndexint?If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.1.10.0
NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside the DropdownMenu.1.10.0
PositionDropdownMenuPositionGets or sets the dropdown menu position.1.10.0
NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside the DropdownHeader.1.10.0
NameTypeDescriptionRequiredDefaultAdded Version
ActiveboolWhen set to 'true', places the component in the active state with active styling.1.10.0
ChildContentRenderFragmentSpecifies the content to be rendered inside the DropdownMenu.1.10.0
DisabledboolWhen set to 'true', disables the component's functionality and places it in a disabled state.1.10.0
TabIndexint?If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.1.10.0
TargetTargetThe target attribute specifies where to open the linked document.Target.None1.10.0
Tostring?Denotes the target route of the link button.1.10.0
TypeButtonTypeDefines the button type.ButtonType.Button1.10.0
NameDescriptionAdded Version
HideAsyncHides the dropdown menu of a given navbar or tabbed navigation.1.10.0
ShowAsyncShows the dropdown menu of a given navbar or tabbed navigation.1.10.0
ToggleAsyncToggles the dropdown menu of a given navbar or tabbed navigation.1.10.0
UpdateAsyncUpdates the position of an element’s dropdown.1.10.0
Event TypeDescriptionAdded Version
OnHidingThis event is fired immediately when the hide method has been called.1.10.0
OnHiddenThis event is fired when an dropdown element has been hidden from the user (will wait for CSS transitions to complete).1.10.0
OnShowingThis event fires immediately when the show instance method is called.1.10.0
OnShownThis event is fired when an dropdown element has been made visible to the user (will wait for CSS transitions to complete).1.10.0

Examples​

Single button​

Blazor Bootstrap: Dropdown Component - Single button
<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>

See the demo here.

Color​

Blazor Bootstrap: Dropdown Component - 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>

See the demo here.

Split button​

Blazor Bootstrap: Dropdown Component - 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>

See the demo here.

Sizing​

Blazor Bootstrap: Dropdown Component - Sizing - Large
<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>
Blazor Bootstrap: Dropdown Component - Sizing - Small
<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>

See the demo here.

Directions​

Dropup​

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

Blazor Bootstrap: Dropdown Component - Dropup
<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>

See the demo here.

Dropup centered​

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

Blazor Bootstrap: Dropdown Component - Dropup centered
<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>

See the demo here.

Dropend​

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

Blazor Bootstrap: Dropdown Component - Dropend
<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>

See the demo here.

Dropstart​

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

Blazor Bootstrap: Dropdown Component - Dropstart
<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>

See the demo here.

Active​

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

Blazor Bootstrap: Dropdown Component - Active
<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>

See the demo here.

Disabled​

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

Blazor Bootstrap: Dropdown Component - Disabled
<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.

Blazor Bootstrap: Dropdown Component - Disabled (Dropdown Item)
<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>

See the demo here.

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.

Blazor Bootstrap: Dropdown Component - Menu position
<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>

See the demo here.

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

Blazor Bootstrap: Dropdown Component - Header
<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>

See the demo here.

Dividers​

Separate groups of related menu items with a divider.

Blazor Bootstrap: Dropdown Component - Dividers
<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>

See the demo here.

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.

Blazor Bootstrap: Dropdown Component - Text
<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>

See the demo here.

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.

Blazor Bootstrap: Dropdown Component - Forms
@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; }
}
}

See the demo here.

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.

Blazor Bootstrap: Dropdown Component - Auto close behavior
<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>

See the demo here.

Methods​

Blazor Bootstrap: Dropdown Component - Methods
<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();
}

See the demo here.

Events​

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

Blazor Bootstrap: Dropdown Component - Events
<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>
@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"));
}

See the demo here.