HxDropdownButtonGroup #

Bootstrap 5 Dropdown component for dropdown buttons.
For generic dropdowns, use HxDropdown.

Basic usage #

Dropdowns are usually used in combination with a button. For such cases, use the HxDropdownButtonGroup and HxDropdownToggleButton.

<HxDropdownButtonGroup>
	<HxDropdownToggleButton Color="ThemeColor.Secondary">Dropdown button</HxDropdownToggleButton>
	<HxDropdownMenu>
		<HxDropdownItemNavLink Href="/components/HxDropdown">Link with Href</HxDropdownItemNavLink>
		<HxDropdownItem OnClick="HandleDropdownItemClick">Item with OnClick action</HxDropdownItem>
		<HxDropdownDivider />
		<HxDropdownItemText>Some text only</HxDropdownItemText>
	</HxDropdownMenu>
</HxDropdownButtonGroup>

@message

@code {
	private string message;
	private void HandleDropdownItemClick() => message = "Dropdown item clicked";
}

Button variants #

Split button #

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

Sizing #

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

Other #

You can use all the generic HxDropdown features such as:

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.
Split bool Set true to create a split dropdown (using a btn-group).

HxDropdownToggleButton #

Bootstrap Dropdown toggle button which triggers the HxDropdownButtonGroup to open.

API #

Parameters #

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying <button> 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.
ChildContent RenderFragment Button content.
Color ThemeColor? Bootstrap button style - theme color.
The default is taken from 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 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? 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.
FormId string Specifies the form the button belongs to.
Icon IconBase Icon to render into the button.
IconCssClass string CSS class to be rendered with the button icon.
IconPlacement ButtonIconPlacement? Position of the icon within the button. The default is ButtonIconPlacement.Start (configurable through Defaults).
OnClick EventCallback<MouseEventArgs> Raised after the button is clicked.
OnClickPreventDefault bool Prevents the default action for the onclick event. Default is false.
OnClickStopPropagation bool Stops onClick-event propagation. Default 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 Defaults, overridden by individual parameters).
SingleClickProtection bool Sets false if you want to allow multiple OnClick handlers in parallel. Default is true.
Size ButtonSize? Button size. The default is ButtonSize.Regular.
Spinner bool? Sets the 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 whether 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.
An unhandled error has occurred. Reload 🗙