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`).
OnClickPreventDefault	`bool`	Prevents the default action for the onclick event. Default is `false`.
OnClickStopPropagation	`bool`	Stops onClick-event propagation. Default is `true`.
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`.
TooltipContainer	`string`	Appends the tooltip to a specific element. Default is `body`.
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
OnClick	`EventCallback<MouseEventArgs>`	Raised after the button is clicked.
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`.
OnInvalidClick	`EventCallback<MouseEventArgs>`	Raised after the button is clicked and EditContext validation fails.
OnShown	`EventCallback`	Fired when the dropdown has been made visible to the user and CSS transitions have completed.
OnValidClick	`EventCallback<MouseEventArgs>`	Raised after the button is clicked and EditContext validation succeeds.

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.