Dropdown

A dropdown list.

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.

Import this Component Individually#

You can get more detail here.

import { NzDropDownModule } from 'ng-zorro-antd/dropdown';

Examples

The most basic dropdown menu.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-basic',
  template: `
    <a nz-dropdown [nzDropdownMenu]="menu">
      Hover me
      <i nz-icon nzType="down"></i>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <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>
  `
})
export class NzDemoDropdownBasicComponent {}

Divider and disabled menu item.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-item',
  template: `
    <a nz-dropdown [nzDropdownMenu]="menu">
      Hover me
      <i nz-icon nzType="down"></i>
    </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-divider></li>
        <li nz-menu-item nzDisabled>3rd menu item(disabled)</li>
      </ul>
    </nz-dropdown-menu>
  `
})
export class NzDemoDropdownItemComponent {}

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
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-event',
  template: `
    <a nz-dropdown [nzDropdownMenu]="menu">
      Hover me, Click menu item
      <i nz-icon nzType="down"></i>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item (click)="log('1st menu item')">1st menu item</li>
        <li nz-menu-item (click)="log('2nd menu item')">2nd menu item</li>
        <li nz-menu-item (click)="log('3rd menu item')">3rd menu item</li>
      </ul>
    </nz-dropdown-menu>
  `
})
export class NzDemoDropdownEventComponent {
  log(data: string): void {
    console.log(data);
  }
}

The menu has multiple levels.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-sub-menu',
  template: `
    <a nz-dropdown [nzDropdownMenu]="menu" (nzVisibleChange)="change($event)">
      Cascading menu
      <i nz-icon nzType="down"></i>
    </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-submenu nzTitle="sub menu">
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
        <li nz-submenu nzDisabled nzTitle="disabled sub menu">
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
      </ul>
    </nz-dropdown-menu>
  `
})
export class NzDemoDropdownSubMenuComponent {
  change(value: boolean): void {
    console.log(value);
  }
}
Context Menu

Trigger dropdown with contextmenu.

expand codeexpand code
import { Component } from '@angular/core';
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd';

@Component({
  selector: 'nz-demo-dropdown-context-menu',
  template: `
    <div class="context-area" (contextmenu)="contextMenu($event, menu)">
      <span class="context-intro">Context Menu</span>
    </div>
    <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 nzDisabled>disabled menu item</li>
        <li nz-submenu nzTitle="sub menu">
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
        <li nz-submenu nzDisabled nzTitle="disabled sub menu">
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
      </ul>
    </nz-dropdown-menu>
  `,
  styles: [
    `
      .context-area {
        background: rgb(190, 200, 200);
        padding: 32px;
        text-align: center;
      }

      .context-intro {
        color: #fff;
        font-size: 14px;
      }
    `
  ]
})
export class NzDemoDropdownContextMenuComponent {
  contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {
    this.nzContextMenuService.create($event, menu);
  }

  closeMenu(): void {
    this.nzContextMenuService.close();
  }

  constructor(private nzContextMenuService: NzContextMenuService) {}
}

Support 6 placements.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-placement',
  template: `
    <div>
      <ng-container *ngFor="let position of listOfPosition">
        <button nz-button nz-dropdown [nzDropdownMenu]="menu" [nzPlacement]="position">{{ position }}</button>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item>1st menu item length</li>
            <li nz-menu-item>2nd menu item length</li>
            <li nz-menu-item>3rd menu item length</li>
          </ul>
        </nz-dropdown-menu>
      </ng-container>
    </div>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoDropdownPlacementComponent {
  listOfPosition = ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'];
}

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-trigger',
  template: `
    <a nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu">
      Click me
      <i nz-icon nzType="down"></i>
    </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-divider></li>
        <li nz-menu-item nzDisabled>disabled menu item</li>
        <li nz-submenu nzTitle="sub menu">
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
        <li nz-submenu nzDisabled nzTitle="disabled sub menu">
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
      </ul>
    </nz-dropdown-menu>
  `
})
export class NzDemoDropdownTriggerComponent {}

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-dropdown-button',
  template: `
    <div style="height: 28px;">
      <nz-button-group>
        <button nz-button (click)="log()">DropDown</button>
        <button nz-button nz-dropdown [nzDropdownMenu]="menu1" nzPlacement="bottomRight">
          <i nz-icon nzType="ellipsis"></i>
        </button>
      </nz-button-group>
      <nz-button-group>
        <button nz-button (click)="log()">DropDown</button>
        <button nz-button nz-dropdown [nzDropdownMenu]="menu2" nzPlacement="bottomRight">
          <i nz-icon nzType="user"></i>
        </button>
      </nz-button-group>
      <nz-button-group>
        <button nz-button disabled>DropDown</button>
        <button nz-button disabled nz-dropdown [nzDropdownMenu]="menu3" nzPlacement="bottomRight">
          <i nz-icon nzType="ellipsis"></i>
        </button>
      </nz-button-group>
      <button nz-button nz-dropdown [nzDropdownMenu]="menu4">
        Button
        <i nz-icon nzType="down"></i>
      </button>
    </div>
    <nz-dropdown-menu #menu1="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>menu1 1st menu item</li>
        <li nz-menu-item>menu1 2nd menu item</li>
        <li nz-menu-item>menu1 3rd menu item</li>
      </ul>
    </nz-dropdown-menu>
    <nz-dropdown-menu #menu2="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>menu2 1st menu item</li>
        <li nz-menu-item>menu2 2nd menu item</li>
        <li nz-menu-item>menu2 3rd menu item</li>
      </ul>
    </nz-dropdown-menu>
    <nz-dropdown-menu #menu3="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>menu3 1st menu item</li>
        <li nz-menu-item>menu3 2nd menu item</li>
        <li nz-menu-item>menu3 3rd menu item</li>
      </ul>
    </nz-dropdown-menu>
    <nz-dropdown-menu #menu4="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>menu4 1st menu item</li>
        <li nz-menu-item>menu4 2nd menu item</li>
        <li nz-menu-item>menu4 3rd menu item</li>
      </ul>
    </nz-dropdown-menu>
  `,
  styles: [
    `
      nz-button-group {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoDropdownDropdownButtonComponent {
  log(): void {
    console.log('click dropdown button');
  }
}

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-overlay-visible',
  template: `
    <a nz-dropdown [nzDropdownMenu]="menu" [nzClickHide]="false" [(nzVisible)]="visible">
      Hover me
      <i nz-icon nzType="down"></i>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>Clicking me will not close the menu.</li>
        <li nz-menu-item>Clicking me will not close the menu also.</li>
        <li nz-menu-item (click)="visible = false">Clicking me will close the menu</li>
      </ul>
    </nz-dropdown-menu>
  `
})
export class NzDemoDropdownOverlayVisibleComponent {
  visible = false;
}

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-
[nzBackdrop]whether the dropdown has a backdrop when nzTrigger is clickbooleantrue
[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.

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

nz-dropdown-menu#

Wrap Dropdown Menu and pass to [nz-dropdown]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, menu:NzDropdownMenuComponent)-
closeclose dropdown--