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#

20.2.0

API#

Property	Description	Type	Default	Version
`[nzDropdownMenu]`	Dropdown menu	`NzDropdownMenuComponent`	-
`[nzDisabled]`	whether the dropdown menu is disabled	`boolean`	-
`[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 click	`boolean`	`true`
`[nzVisible]`	whether the dropdown menu is visible, double binding	`boolean`	-
`[nzOverlayClassName]`	Class name of the dropdown root element	`string`	-
`[nzOverlayStyle]`	Style of the dropdown root element	`object`	-
`(nzVisibleChange)`	a callback function takes an argument: `nzVisible`, is executed when the visible state is changed	`EventEmitter<boolean>`	-
`[nzArrow]`	Whether the dropdown arrow should be visible	`boolean`	`false`	20.2.0

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.

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>

NzContextMenuServiceservice#

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

Property	Description	Arguments	Return Value
create	create dropdown	`($event:MouseEvent \| {x:number, y:number}, menu:NzDropdownMenuComponent)`	`EmbeddedViewRef<any>`
close	close dropdown	-	-

FAQ#

Q: The overlay layer element does not follow the scroll position when scrolling#

By default, the overlay layer element uses body as the scroll container. If using another scroll container, add the CdkScrollable directive to the custom scroll container element. Note: You need to import the CdkScrollable directive or ScrollingModule module from @angular/cdk/scrolling.