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.

Custom toggle element

Use HxDropdownToggleElement (with ElementName="...") instead of HxDropdownToggleButton to create custom toggler. (Usually you will add role="button" to apply pointer cursor type.)

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.

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

HxDropdownToggleButton

Bootstrap Dropdown toggle button which triggers the HxDropdown to open.

API

Parameters

Name Type Description
AdditionalAttributes Dictionary<string, TValue> Additional attributes to be splatted onto an underlying <button> element.
ChildContent RenderFragment Button content.
Color ThemeColor? Bootstrap button style - theme color.
Default is taken from HxButton.Defaults (ThemeColor.None if not customized).
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.
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.
EditContext EditContext Associated EditContext.
Enabled bool?
FormId string Specifies the form the button belongs to.
Icon IconBase Icon to render into the button.
IconPlacement ButtonIconPlacement? Position of the icon within the button. Default is ButtonIconPlacement.Start (configurable through HxButton.Defaults).
OnClick EventCallback<MouseEventArgs> Raised after the button is clicked.
OnClickPreventDefault bool Prevents the default action for the onclick event. Deafult is false.
OnClickStopPropagation bool Stop onClick-event propagation. Deafult is true.
OnInvalidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation fails.
OnValidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation succeeds.
Outline bool? Bootstrap "outline" button style.
Settings ButtonSettings Set of settings to be applied to the component instance (overrides HxButton.Defaults, overriden by individual parameters).
SingleClickProtection bool Set false if you want to allow multiple OnClick handlers in parallel. Default is true.
Size ButtonSize? Button size. Default is ButtonSize.Regular.
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.
Text string Text of the button.
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.
TooltipCssClass string Custom CSS class to render with the tooltip.
TooltipPlacement TooltipPlacement Tooltip placement.
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.

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.

Static properties

Property Type Description
Defaults ButtonSettings Application-wide defaults for HxDropdownToggleButton and derived components.

HxDropdownToggleElement

Bootstrap Dropdown toggle button which triggers the HxDropdown to open.

API

Parameters

Name Type Description
AdditionalAttributes IDictionary<string, TValue> A collection of additional attributes that will be applied to the created element.
ChildContent RenderFragment Content of the component.
CssClass string Custom CSS class to render with the toggle element.
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.
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
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, TValue> Additional attributes to be splatted onto an underlying NavLink component.
ChildContent RenderFragment Content.
CssClass string Additional CSS class.
Enabled bool?
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
ChildContent RenderFragment Content of the component.
CssClass string Any additional CSS class to apply.
Enabled bool?
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.
CssClass string Any additional CSS class to apply.

HxDropdownDivider

Divider for the HxDropdownMenu.

API

An unhandled error has occurred. Reload 🗙