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.

When you supply the HxDropdownMenu.Alignment parameter, it is only applied when the dropdown menu wouldn't overflow (no part is covered), otherwise, the dropdown menu is positioned automatically by Popper.

If you want to force the set alignment, then add the data-bs-display attribute to the HxDropdownToggleElement (HxDropdownToggleButton) and set it to static.

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.

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.

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.

API #

Parameters #

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.

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

HxDropdown #

Basic usage #

Directions #

Header, Disabled, Active #

Dropdown header

Menu alignment #

Custom content #

Dropdown offset and reference #

Reference to custom HTML element #

AutoClose behavior #

Nav with dropdown #

Dark dropdowns #

Dropdown with icons #

API #

Parameters #

CSS variables #

HxDropdownToggleElement #

API #

Parameters #

Event callbacks #

Methods #

HxDropdownMenu #

API #

Parameters #

HxDropdownContent #

API #

Parameters #

HxDropdownHeader #

API #

Parameters #

HxDropdownItemNavLink #

API #

Parameters #

Event callbacks #

HxDropdownItem #

API #

Parameters #

Event callbacks #

HxDropdownItemText #

API #

Parameters #

HxDropdownDivider #

API #

Parameters #