logo

Dropdown

A dropdown list.

When To Use

When there are more than a few options to choose from, you can wrap them in a Dropdown. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.

Two types

There are 2 rendering approaches for Dropdown:

  1. Wraps child element (content of the Dropdown) with a <div> (default approach).
  2. Child element is not wrapped with anything. This approach requires usage of <Unbound> tag inside <Dropdown> and depending on the child element type (please refer to the first example):
    • html tag: has to have its @ref set to @context.Current
    • Ant Design Blazor component: has to have its RefBack attribute set to @context.

Examples

The most basic dropdown menu of both types.

expand code expand code

Divider and disabled menu item.

expand code expand code

By specifying ArrowPointAtCenter prop with true, the arrow will point to the center of the target element.

expand code expand code

An event will be triggered when you click menu items, in which you can make different operations according to item's key.

expand code expand code

The menu has multiple levels.

expand code expand code

The default trigger mode is hover, you can change it to contextMenu.(Full supported in NET5 right now)

expand code expand code

Fix popup container.

expand code expand code

Support 6 placements.

expand code expand code

You could display an arrow.

expand code expand code

The default trigger mode is hover, you can change it to click.

expand code expand code

A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.

expand code expand code

The default is to close the menu when you click on menu items, this feature can be turned off.

expand code expand code

Use enum TriggerBoundaryAdjustMode to choose pop-up repositioning strategy if the dropdown does not fit in the visible area. There are 3 available strategies:

  • None - Do not reposition.
  • InView - Attempt to fit the overlay so it is always fully visible in the viewport. So if the overlay is outside of the viewport ("overflows"), then reposition calculation is going to be attempted.
  • InScroll - The document boundaries are the boundaries used for calculation if overlay needs to be reposition. So even if the overlay is outside of the viewport, the overlay may still be shown as long as it does not "overflow" the document boundaries.
expand code expand code

Dropdown API#

Property Description Type Default Value
Arrow ParameterWhether the dropdown arrow should be visible. Boolean false
ArrowPointAtCenter ParameterWhether the dropdown arrow should point at center Boolean false
BoundaryAdjustMode ParameterOverlay adjustment strategy (when for example browser resize is happening). Check enum for details. TriggerBoundaryAdjustMode TriggerBoundaryAdjustMode.InView
ChildContent ParameterTrigger (link, button, etc) RenderFragment --
ComplexAutoCloseAndVisible ParameterWhether need both auto-off and Visible control closing. Boolean false
Disabled ParameterWhether the trigger is disabled. Boolean false
HiddenMode ParameterProperty forwarded to Overlay component. Consult the Overlay property for more detailed explanation. Boolean false
InlineFlexMode Parameter(not used in Unbound) Sets wrapping div style to `display: inline-flex;`. Boolean false
IsButton ParameterBehave like a button: when clicked invoke OnClick (unless OnClickDiv is overriden and does not call base). Boolean false
OnClick ParameterCallback when triggger is clicked EventCallback<MouseEventArgs> --
OnMaskClick ParameterCallback - equivalent of OnMouseUp event on the trigger trigger. EventCallback --
OnMouseEnter ParameterCallback when mouse enters trigger boundaries. EventCallback --
OnMouseLeave ParameterCallback when mouse leaves trigger boundaries. EventCallback --
OnOverlayHiding ParameterCallback when overlay is hiding. EventCallback<Boolean> --
OnVisibleChange ParameterCallback when overlay visibility is changing.Use VisibleChanged instead

Obsolete Will be removed in a future version.
EventCallback<Boolean> --
Overlay ParameterOverlay content (what will be rendered after trigger is activated) RenderFragment --
OverlayClassName ParameterOverlay container custom css class. String --
OverlayEnterCls ParameterCss class added to overlay when overlay is shown. String --
OverlayHiddenCls ParameterCss class added to overlay when overlay is hidden. String --
OverlayLeaveCls ParameterCss class added to overlay when overlay is hiding. String --
OverlayStyle ParameterCss style that will be added to overlay div. String --
Placement ParameterThe position of the Dropdown overlay relative to the target. Can be: Top, Left, Right, Bottom, TopLeft, TopRight, BottomLeft, BottomRight, LeftTop, LeftBottom, RightTop, RightBottom Placement PlacementType.BottomLeft
PlacementCls ParameterOverride default placement class which is based on `Placement` parameter. String --
PopupContainerSelector ParameterDefine what is going to be the container of the overlay. Example use case: when overlay has to be contained in a scrollable area. String body
Trigger ParameterTrigger mode. Could be multiple by passing an array. Trigger[] TriggerType.Hover
TriggerCls ParameterThe trigger element CSS class. String ant-dropdown-trigger
TriggerReference ParameterManually set reference to triggering element. ElementReference --
Unbound ParameterChildElement with ElementReference set to avoid wrapping div. RenderFragment<ForwardRef> --
Visible ParameterToggles overlay viability. Boolean false
VisibleChanged ParameterCallback when visibility is changed. EventCallback<Boolean> --
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --
Method Signature Return Type Description
Close() Task Will hide the overlay.
IsOverlayShow() Boolean Checks if overlay is currently in visible state.
SetVisible(Boolean visible) void Toggle overlay visibility.

DropdownButton API#

Property Description Type Default Value
Block ParameterOption to fit button width to its parent width Boolean --
ButtonsRender ParameterFully customizable button. Func<RenderFragment, RenderFragment, RenderFragment> --
ButtonsClass ParameterAllows to set each button's css class either to the same string or separately. OneOf<String, ValueTuple<String, String>> --
ButtonsStyle ParameterAllows to set each button's style either to the same string or separately. OneOf<String, ValueTuple<String, String>> --
Danger ParameterSet the danger status of button Boolean false
Ghost ParameterUsed in situations with complex background, home pages usually. Boolean false
Icon ParameterIcon that will be rendered in the right button. String ellipsis
Loading ParameterIndicates if loading icon is going to be included. If set to true, then dropdown will not be active. Boolean false
Size ParameterButton size. String AntSizeLDSType.Default
Type ParameterAllows to set each button's type either to the same string or separately. Use AntDesign.ButtonType helper class. OneOf<String, ValueTuple<String, String>> ButtonType.Default
Arrow ParameterWhether the dropdown arrow should be visible. Boolean false
ArrowPointAtCenter ParameterWhether the dropdown arrow should point at center Boolean false
BoundaryAdjustMode ParameterOverlay adjustment strategy (when for example browser resize is happening). Check enum for details. TriggerBoundaryAdjustMode TriggerBoundaryAdjustMode.InView
ChildContent ParameterTrigger (link, button, etc) RenderFragment --
ComplexAutoCloseAndVisible ParameterWhether need both auto-off and Visible control closing. Boolean false
Disabled ParameterWhether the trigger is disabled. Boolean false
HiddenMode ParameterProperty forwarded to Overlay component. Consult the Overlay property for more detailed explanation. Boolean false
InlineFlexMode Parameter(not used in Unbound) Sets wrapping div style to `display: inline-flex;`. Boolean false
IsButton ParameterBehave like a button: when clicked invoke OnClick (unless OnClickDiv is overriden and does not call base). Boolean false
OnClick ParameterCallback when triggger is clicked EventCallback<MouseEventArgs> --
OnMaskClick ParameterCallback - equivalent of OnMouseUp event on the trigger trigger. EventCallback --
OnMouseEnter ParameterCallback when mouse enters trigger boundaries. EventCallback --
OnMouseLeave ParameterCallback when mouse leaves trigger boundaries. EventCallback --
OnOverlayHiding ParameterCallback when overlay is hiding. EventCallback<Boolean> --
OnVisibleChange ParameterCallback when overlay visibility is changing.Use VisibleChanged instead

Obsolete Will be removed in a future version.
EventCallback<Boolean> --
Overlay ParameterOverlay content (what will be rendered after trigger is activated) RenderFragment --
OverlayClassName ParameterOverlay container custom css class. String --
OverlayEnterCls ParameterCss class added to overlay when overlay is shown. String --
OverlayHiddenCls ParameterCss class added to overlay when overlay is hidden. String --
OverlayLeaveCls ParameterCss class added to overlay when overlay is hiding. String --
OverlayStyle ParameterCss style that will be added to overlay div. String --
Placement ParameterThe position of the Dropdown overlay relative to the target. Can be: Top, Left, Right, Bottom, TopLeft, TopRight, BottomLeft, BottomRight, LeftTop, LeftBottom, RightTop, RightBottom Placement PlacementType.BottomLeft
PlacementCls ParameterOverride default placement class which is based on `Placement` parameter. String --
PopupContainerSelector ParameterDefine what is going to be the container of the overlay. Example use case: when overlay has to be contained in a scrollable area. String body
Trigger ParameterTrigger mode. Could be multiple by passing an array. Trigger[] TriggerType.Hover
TriggerCls ParameterThe trigger element CSS class. String ant-dropdown-trigger
TriggerReference ParameterManually set reference to triggering element. ElementReference --
Unbound ParameterChildElement with ElementReference set to avoid wrapping div. RenderFragment<ForwardRef> --
Visible ParameterToggles overlay viability. Boolean false
VisibleChanged ParameterCallback when visibility is changed. EventCallback<Boolean> --
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --
Method Signature Return Type Description
Close() Task Will hide the overlay.
IsOverlayShow() Boolean Checks if overlay is currently in visible state.
SetVisible(Boolean visible) void Toggle overlay visibility.
Breadcrumb Menu
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.