HxDropdown

Bootstrap 5 Dropdown component.

Basic structure

<HxDropdown>
	<HxDropdownToggleButton Color="ThemeColor.Secondary">Dropdown button</HxDropdownToggleButton>
	<HxDropdownMenu>
		<HxDropdownItemNavLink Href="...">Item 1</HxDropdownItemNavLink>
		<HxDropdownItem OnClick="...">Item 2</HxDropdownItem>
		<HxDropdownDivider />
		<HxDropdownItemText>Plain text</HxDropdownItemText>
	</HxDropdownMenu>
</HxDropdown>

Examples

Single button

Button Variants

Split button

Set HxDropdown.Split = "true" and leave the HxDrodownToggle.Text empty (you can use the ChildContent to improve accessibility).

Sizing

HxDropdowns work with buttons of all sizes, including default and split dropdown buttons.

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.

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.

Auto close 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.

Nav with 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
Direction DropdownDirection
Split bool Set true to create a split dropdown (using a btn-group).
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. .
CssClass string Any additional CSS class to apply.
ChildContent RenderFragment

HxDropdownToggleButton

Bootstrap Dropdown toggle button which triggers the HxDropdown to open.

API

Parameters

Name Type Description
DropdownOffset Nullable<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.
Text string Text of the button.
ChildContent RenderFragment Button content.
Icon IconBase Icon to render into the button.
Color ThemeColor? Bootstrap button style - theme color.
Default is taken from HxButton.Defaults (ThemeColor.None if not customized).
Size ButtonSize? Button size. Default is ButtonSize.Regular.
Outline bool? Bootstrap "outline" button style.
CssClass string Custom CSS class to render with the <button />.
When using Tooltip you might want to use TooltipWrapperCssClass instead of CssClass to get the desired result.
Enabled bool?
EditContext EditContext Associated EditContext.
FormId string Specifies the form the button belongs to.
Tooltip string Tooltip text.
If set, a span wrapper will be rendered around the <button />. For most scenarios you will then use TooltipWrapperCssClass instead of CssClass.
TooltipPlacement TooltipPlacement Tooltip placement.
TooltipCssClass string Custom CSS class to render with the tooltip.
TooltipWrapperCssClass string Custom CSS class to render with the tooltip span wrapper of the <button />.
If set, the span wrapper will be rendered no matter the Tooltip text is set or not.
OnClickStopPropagation bool Stop onClick-event propagation. Deafult is true.
OnClickPreventDefault bool Prevents the default action for the onclick event. Deafult is false.
Spinner bool? Set state of the embedded HxSpinner. Leave null if you want automated spinner when any of the OnClick handlers is running. You can set an explicit false constant to disable (override) the spinner automation.
SingleClickProtection bool Set false if you want to allow multiple OnClick handlers in parallel. Default is true.
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying <button> element.

Event Callbacks

Name Type Description
OnClick EventCallback<MouseEventArgs> Raised after the button is clicked.
OnValidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation succeeds.
OnInvalidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation fails.

HxDropdownMenu

Bootstrap Dropdown menu which opens when triggered.

API

Parameters

Name Type Description
CssClass string Any additional CSS class to apply.
ChildContent RenderFragment

HxDropdownHeader

Dropdown menu header for HxDropdownMenu.

API

Parameters

Name Type Description
CssClass string Any additional CSS class to apply.
ChildContent RenderFragment

HxDropdownItemNavLink

NavLink item for the HxDropdownMenu.

API

Parameters

Name Type Description
Href string Navigation target.
Text string Text of the item.
Match NavLinkMatch? URL matching behavior for the underlying NavLink. Default is NavLinkMatch.Prefix. You can set the value to null to disable the matching.
CssClass string Additional CSS class.
Enabled bool?
ChildContent RenderFragment Content.
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying NavLink component.

Event Callbacks

Name Type Description
OnClick EventCallback<MouseEventArgs> Raised when the item is clicked.

HxDropdownItem

Generic item for the HxDropdownMenu.

API

Parameters

Name Type Description
CssClass string Any additional CSS class to apply.
Enabled bool?
ChildContent RenderFragment

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
CssClass string Any additional CSS class to apply.
ChildContent RenderFragment

HxDropdownDivider

Divider for the HxDropdownMenu.

API

An unhandled error has occurred. Reload 🗙