Our Blazor DropDown component allows you to display a drop-down window in your application. The window consists of the header, body, and footer elements. The header and footer are initially hidden. Set the HeaderVisible and FooterVisible properties to true to display these elements.

The HeaderText, BodyText, and FooterText properties specify text displayed in the DropDown elements.

To show or close the DropDown in code, implement two-way binding for the IsOpen property. Users can click outside the DropDown's boundaries, or press Escape to close the component from the UI.

The DropDown component uses predefined appearance settings if you specify the HeaderText, BodyText, or FooterText property. You can apply custom CSS classes to DropDown elements (BodyCssClass, HeaderCssClass, and FooterCssClass properties).

To customize the window's content, you can use the following templates:

• HeaderTextTemplate, BodyTextTemplate, FooterTextTemplate — Allow you to customize a DropDown element text area. These templates replace the text content area only.
• HeaderContentTemplate, BodyContentTemplate, FooterContentTemplate — Allow you to add custom content to a DropDown element. These templates replace the content area only.
• HeaderTemplate, BodyTemplate, FooterTemplate — Allow you to customize the entire area of DropDown elements. These templates change the default element rendering, including paddings, scroll bar, and inner content alignment.

Use the PositionMode property to specify the DropDown position relative to a target element PositionTarget or to a Rectangle object PositionRectangle.

The HorizontalOffset and VerticalOffset properties set the component offset from the specified position.

The DropDown recalculates its position when certain page elements are changed (for instance, when the page is scrolled or resized). Use the RestrictionMode property to restrict the DropDown position.

In this demo, the RestrictionMode property is set to TargetElement and the drop-down window position is restricted by the target element's boundaries (specified by the RestrictionTarget property).

The FitToRestriction property specifies whether the DropDown can overlap restriction boundaries. When the component does not meet the position restrictions, it can be hidden or closed, based on the CloseMode property value.

Enable the AllowResize property to allow users to change the DropDown's size. When enabled, the component displays a size grip. Users can drag it to change the drop-down window width and height.

Use the following properties to restrict changes to the component size: MinWidth, MaxWidth, MinHeight, MaxHeight.