HxDropdown #

Bootstrap 5 Dropdown generic component.
For buttons with dropdowns, use the 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 #

If you want to position the dropdown relative to a specific element, use the DropdownReference parameter.
Specific structure of #id gets recognized and handed over to the underlying Bootstraps dropdown.

Reference element

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.

Dropdown with icons #

You can use the Icon parameter to add an icon to dropdown items.

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. See https://getbootstrap.com/docs/5.3/components/dropdowns/#auto-close-behavior for more information.
ChildContent RenderFragment Content of the component.
CssClass string Any additional CSS class to apply.
Direction DropdownDirection The direction in which the dropdown is opened.

CSS variables #

Name Description Default
--hx-dropdown-menu-item-icon-margin Margin of the item icon. 0 .5rem 0 0

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.
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.3/components/dropdowns/#auto-close-behavior. The parameter can be used to override the settings of the DropdownContainer component or to specify the auto-close behavior when the component is not used.
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.
Value string Value for cases when the dropdown is used as an input element.
ValueChanged EventCallback<string> Raised when the value changes (binds to onchange input event).

Event callbacks #

Name Type Description
OnHidden EventCallback Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
OnHiding EventCallback<DropdownHidingEventArgs> Fired immediately when the 'hide' instance method is called. To cancel hiding, set DropdownHidingEventArgs.Cancel to true.
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 applied to an underlying ul element.
Alignment DropdownMenuAlignment?
ChildContent RenderFragment Content of the component.
CssClass string Any additional CSS class to apply.

HxDropdownContent #

Custom dropdown content for HxDropdown.

API #

Parameters #

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be applied to 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.
Icon IconBase Item icon (use BootstrapIcon).
IconCssClass string Additional CSS class(es) for the context menu item icon.

HxDropdownItemNavLink #

NavLink item for the HxDropdownMenu.

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 the 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.
Icon IconBase Item icon (use BootstrapIcon).
IconCssClass string Additional CSS class(es) for the context menu item icon.
Match NavLinkMatch? URL matching behavior for the underlying NavLink. The default is NavLinkMatch.Prefix. You can set the value to null to disable the matching.
Text string Text of the item.
Name Type Description
OnClick EventCallback<MouseEventArgs> Raised when the item is clicked.

HxDropdownItem #

Generic item for the HxDropdownMenu.

API #

Parameters #

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto the underlying li>span element.
ChildContent RenderFragment Content of the component.
ContainerCssClass string Additional CSS class for the underlying li container (wrapping the main span inside).
CssClass string Additional CSS class for the 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.
Icon IconBase Item icon (use BootstrapIcon).
IconCssClass string Additional CSS class(es) for the context menu item icon.

Event callbacks #

Name Type Description
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 the underlying li container (wrapping the main span inside).
CssClass string Any additional CSS class to apply.
Icon IconBase Item icon (use BootstrapIcon).
IconCssClass string Additional CSS class(es) for the context menu item icon.

HxDropdownDivider #

Divider for the HxDropdownMenu.

API #

Parameters #

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