HxDropdown

Bootstrap 5 Dropdown generic component.
For buttons with dropdowns use more specific HxDropdownButtonGroup.

Basic usage #

Use HxDropdown and HxDropdownToggleElement (with ElementName="...") to create dropdown with custom toggler. (Usually you will add role="button" to apply pointer cursor type.)

<HxDropdown>
	<HxDropdownToggleElement ElementName="div" CssClass="bg-success p-3 text-white" role="button">
        Custom dropdown toggle element
        <HxIcon Icon="BootstrapIcon.Trash" />
    </HxDropdownToggleElement>
	<HxDropdownMenu>
		<HxDropdownItemNavLink Href="/components/HxDropdown">Link with Href</HxDropdownItemNavLink>
		<HxDropdownItem OnClick="HandleDropdownItemClick">Item with OnClick action</HxDropdownItem>
		<HxDropdownDivider />
		<HxDropdownItemText>Some text only</HxDropdownItemText>
	</HxDropdownMenu>
</HxDropdown>
@message
@code {
	private string message;
	private void HandleDropdownItemClick() => message = "Dropdown item clicked";
}

Directions #

Header, Disabled, Active #

Set CssClass="active" to highlight the item. (In case of NavLink functionality needed, separate HxDropdownMenuNavLinkItem will be implemented.)

Set Enabled="false" to disable the item. The HxFormState.Enabled inheritance is also supported.

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the HxDropdownMenu.Alignment parameter. By default, no alignment classes are applied.

Custom content #

Use HxDropdownContent instead of HxDropdownMenu.

Dropdown offset and reference #

You can change the location of the dropdown by setting the HxDropdownToggleButton.DropdownOffset and/or HxDropdownToggleButton.DropdownReference.

Reference to custom HTML element #

Bootstrap's dropdown relies on specific structure where the dropdown-toggle and dropdown-menu are direct ancestors of common parent. When you cannot stick with this structure (e.g. by adding Tooltip wrapping the button with span), you have to use explicit DropdownReference.
Specific structure of #id gets recognized and handed over to the underlying Bootstraps dropdown.

AutoClose behavior #

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the AutoClose parameter to change this behavior of the dropdown.

You can use HxDropdown inside HxNav.

Dark dropdowns #

Opt into darker dropdowns to match a dark navbar or custom style by adding .dropdown-menu-dark onto a HxDropdownMenu component.

API

Parameters

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying div element.
AutoClose DropdownAutoClose By default, the dropdown menu is closed when clicking inside or outside the dropdown menu (DropdownAutoClose.True). You can use the AutoClose parameter to change this behavior of the dropdown. https://getbootstrap.com/docs/5.1/components/dropdowns/#auto-close-behavior.
ChildContent RenderFragment Content of the component.
CssClass string Any additional CSS class to apply.
Direction DropdownDirection Direction in which the dropdown is opened.

HxDropdownToggleElement

Bootstrap Dropdown toggle button which triggers the HxDropdown to open.

API

Parameters

Name Type Description
AdditionalAttributes IDictionary<string, object> A collection of additional attributes that will be applied to the created element.
Caret bool Gets or sets whether to display caret in the toggle.
Default is false.
ChildContent RenderFragment Content of the component.
CssClass string Custom CSS class to render with the toggle element.
DropdownOffset ValueTuple<int, int>? Offset (skidding, distance) of the dropdown relative to its target. Default is (0, 2).
DropdownReference string Reference element of the dropdown menu. Accepts the values of toggle (default), parent, an HTMLElement reference (e.g. #id) or an object providing getBoundingClientRect. For more information refer to Popper's constructor docs and virtual element docs.
ElementName string Gets or sets the name of the element to render. Default is span.

Event callbacks

Name Type Description
OnHidden EventCallback Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
OnShown EventCallback Fired when the dropdown has been made visible to the user and CSS transitions have completed.

Methods

Method Returns Description
HideAsync() Task Hides the dropdown.
ShowAsync() Task Shows the dropdown.

HxDropdownMenu

Bootstrap Dropdown menu which opens when triggered.

API

Parameters

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying ul element.
Alignment DropdownMenuAlignment?
ChildContent RenderFragment Content of the component.
CssClass string Any additional CSS class to apply.

HxDropdownHeader

Dropdown menu header for HxDropdownMenu.

API

Parameters

Name Type Description
ChildContent RenderFragment Content of the component.
CssClass string Any additional CSS class to apply.

HxDropdownItemNavLink

NavLink item for the HxDropdownMenu.

API

Parameters

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying NavLink component.
ChildContent RenderFragment Content.
ContainerCssClass string Additional CSS class for underlying li container (wrapping the main a inside).
CssClass string Additional CSS class.
Enabled bool? When null (default), the Enabled value is received from cascading FormState. When value is false, input is rendered as disabled. To set multiple controls as disabled use HxFormState.
Href string Navigation target.
Match NavLinkMatch? URL matching behavior for the underlying NavLink. Default is NavLinkMatch.Prefix. You can set the value to null to disable the matching.
OnClick EventCallback<MouseEventArgs> Raised when the item is clicked.
Text string Text of the item.

HxDropdownItem

Generic item for the HxDropdownMenu.

API

Parameters

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying li>span element.
ChildContent RenderFragment Content of the component.
ContainerCssClass string Additional CSS class for underlying li container (wrapping the main span inside).
CssClass string Additional CSS class for underlying li>span element.
Enabled bool? When null (default), the Enabled value is received from cascading FormState. When value is false, input is rendered as disabled. To set multiple controls as disabled use HxFormState.
OnClick EventCallback<MouseEventArgs> Raised when the item is clicked.

HxDropdownItemText

Text item for the HxDropdownMenu.

API

Parameters

Name Type Description
ChildContent RenderFragment Content of the component.
ContainerCssClass string Additional CSS class for underlying li container (wrapping the main span inside).
CssClass string Any additional CSS class to apply.

HxDropdownDivider

Divider for the HxDropdownMenu.

API

Parameters

Name Type Description
ContainerCssClass string Additional CSS class for underlying li container (wrapping the main hr inside).
CssClass string Additional CSS class for underlying li>hr element.
An unhandled error has occurred. Reload 🗙