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.

      Loading...
Other elements

Divider and disabled menu item.

      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.

      Loading...
Cascading menu

The menu has multiple levels.

      Loading...
Right Click on here
Context Menu

Trigger dropdown with contextmenu.

      Loading...
Placement

Support 6 placements.

      Loading...
Trigger mode

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

      Loading...
Button with dropdown menu

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

      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.

      Loading...
Arrow

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