Dropdown

A dropdown list.
Import

When To Use#

If there are too many operations to display, you can wrap them in a Dropdown. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.

Examples

The most basic dropdown menu.

      Loading...
    

Divider and disabled menu item.

      Loading...
    

An event will be triggered when you click menu items, in which you can make different operations by adding events to item.

      Loading...
    

The menu has multiple levels.

      Loading...
    
Right Click on here

Trigger dropdown with contextmenu.

      Loading...
    

Support 6 placements.

      Loading...
    

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

      Loading...
    

A button is on the left, and a related functional menu is on the right.

      Loading...
    

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

      Loading...
    

You could display an arrow

      Loading...
    

API#

[nz-dropdown]#

PropertyDescriptionTypeDefault
[nzDropdownMenu]Dropdown menuNzDropdownMenuComponent-
[nzDisabled]whether the dropdown menu is disabledboolean-
[nzPlacement]placement of pop menu'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight''bottomLeft'
[nzTrigger]the trigger mode which executes the drop-down action'click' | 'hover''hover'
[nzClickHide]whether hide menu when clickbooleantrue
[nzVisible]whether the dropdown menu is visible, double bindingboolean-
[nzOverlayClassName]Class name of the dropdown root elementstring-
[nzOverlayStyle]Style of the dropdown root elementobject-
(nzVisibleChange)a callback function takes an argument: nzVisible, is executed when the visible state is changedEventEmitter<boolean>-
[nzArrow]Whether the dropdown arrow should be visiblebooleanfalse

You should use nz-menu in nz-dropdown. The menu items and dividers are also available by using nz-menu-item and nz-menu-divider.

Note: [nz-menu] of nz-dropdown is unselectable by default, you can make it selectable via <ul nz-menu nzSelectable>.

The nzMode of [nz-menu] inside nz-dropdown-menu can only be the default value vertical.

nz-dropdown-menu#

Wrap Dropdown Menu and pass to [nz-dropdown] and NzContextMenuService, you can export it via Template Syntax nzDropdownMenu

Note:Every [nz-dropdown] should pass independent nz-dropdown-menu.

<a nz-dropdown [nzDropdownMenu]="menu">Hover me</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu>
    <li nz-menu-item>1st menu item</li>
    <li nz-menu-item>2nd menu item</li>
    <li nz-menu-item>3rd menu item</li>
  </ul>
</nz-dropdown-menu>

NzContextMenuService#

Create dropdown with contextmenu, the detail can be found in the example above

PropertyDescriptionArgumentsReturn Value
createcreate dropdown($event:MouseEvent | {x:number, y:number}, menu:NzDropdownMenuComponent)EmbeddedViewRef<any>
closeclose dropdown--