Dropdown

A dropdown list.
Import
Source components/dropdown
Docs Edit this page

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

Basic

The most basic dropdown menu.

expand codeexpand code
      Loading...
Other elements

Divider and disabled menu item.

expand codeexpand code
      Loading...
Click event

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

expand codeexpand code
      Loading...
Cascading menu

The menu has multiple levels.

expand codeexpand code
      Loading...
Right Click on here
Context Menu

Trigger dropdown with contextmenu.

expand codeexpand code
      Loading...
Placement

Support 6 placements.

expand codeexpand code
      Loading...
Trigger mode

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

expand codeexpand code
      Loading...
Button with dropdown menu

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

expand codeexpand code
      Loading...
The way of hiding menu.

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

expand codeexpand code
      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>-

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