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.

Examples

The most basic dropdown menu.

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

@Component({
  selector: 'nz-demo-dropdown-basic',
  template: `
    <nz-dropdown>
      <a nz-dropdown> Hover me <i nz-icon type="down"></i> </a>
      <ul nz-menu nzSelectable>
        <li nz-menu-item>
          <a>1st menu item</a>
        </li>
        <li nz-menu-item>
          <a>2nd menu item</a>
        </li>
        <li nz-menu-item>
          <a>3rd menu item</a>
        </li>
      </ul>
    </nz-dropdown>
  `,
  styles: []
})
export class NzDemoDropdownBasicComponent {}

Divider and disabled menu item.

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

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

Trigger dropdown with contextmenu.

expand codeexpand code
import { Component, TemplateRef } from '@angular/core';
import { NzDropdownContextComponent, NzDropdownService, NzMenuItemDirective } from 'ng-zorro-antd';

@Component({
  selector: 'nz-demo-dropdown-context-menu',
  template: `
    <div
      style="background: rgb(190, 200, 200); padding: 32px;text-align: center"
      (contextmenu)="contextMenu($event, template)"
    >
      <ng-template #template>
        <ul nz-menu nzInDropDown (nzClick)="close($event)">
          <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>
            <span title>sub menu</span>
            <ul>
              <li nz-menu-item>3rd menu item</li>
              <li nz-menu-item>4th menu item</li>
            </ul>
          </li>
          <li nz-submenu nzDisabled>
            <span title>disabled sub menu</span>
            <ul>
              <li nz-menu-item>3rd menu item</li>
              <li nz-menu-item>4th menu item</li>
            </ul>
          </li>
        </ul>
      </ng-template>
      <span style="color:#fff;font-size: 14px;">Context Menu</span>
    </div>
  `,
  styles: []
})
export class NzDemoDropdownContextMenuComponent {
  private dropdown: NzDropdownContextComponent;

  contextMenu($event: MouseEvent, template: TemplateRef<void>): void {
    this.dropdown = this.nzDropdownService.create($event, template);
  }

  close(e: NzMenuItemDirective): void {
    console.log(e);
    this.dropdown.close();
  }

  constructor(private nzDropdownService: NzDropdownService) {}
}

Support 6 placements.

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

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

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: `
    <nz-dropdown [nzTrigger]="'click'">
      <a nz-dropdown> Click me <i nz-icon type="down"></i> </a>
      <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>
          <span title>sub menu</span>
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
        <li nz-submenu nzDisabled>
          <span title>disabled sub menu</span>
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
      </ul>
    </nz-dropdown>
  `,
  styles: []
})
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-dropdown-button (nzClick)="log()">
        DropDown
        <ul nz-menu>
          <li nz-menu-item>1st menu item</li>
          <li nz-menu-item>2nd menu item</li>
          <li nz-submenu>
            <span title>sub menu</span>
            <ul>
              <li nz-menu-item>3rd menu item</li>
              <li nz-menu-item>4th menu item</li>
            </ul>
          </li>
        </ul>
      </nz-dropdown-button>
      <nz-dropdown-button nzDisabled>
        DropDown
        <ul nz-menu>
          <li nz-menu-item>
            <a>1st menu item</a>
          </li>
          <li nz-menu-item>
            <a>2nd menu item</a>
          </li>
          <li nz-menu-item>
            <a>3rd menu item</a>
          </li>
        </ul>
      </nz-dropdown-button>
      <nz-dropdown>
        <button nz-button nz-dropdown><span>Button</span> <i nz-icon type="down"></i></button>
        <ul nz-menu>
          <li nz-menu-item>
            <a>1st menu item</a>
          </li>
          <li nz-menu-item>
            <a>2nd menu item</a>
          </li>
          <li nz-menu-item>
            <a>3rd menu item</a>
          </li>
        </ul>
      </nz-dropdown>
    </div>
  `,
  styles: [
    `
      nz-dropdown-button {
        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: `
    <nz-dropdown [nzClickHide]="false" [(nzVisible)]="visible">
      <a nz-dropdown> Hover me <i nz-icon type="down"></i> </a>
      <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>
  `,
  styles: []
})
export class NzDemoDropdownOverlayVisibleComponent {
  visible = false;
}

API#

Import this Component Individually#

You can get more detail here.

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

nz-dropdown#

You should add [nz-dropdown] to the element that trigger dropdown

PropertyDescriptionTypeDefault
[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.

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

[nz-dropdown]#

mark the element that trigger dropdown

nz-dropdown-button#

PropertyDescriptionTypeDefault
[nzDisabled]whether the dropdown menu is disabledboolean-
[nzPlacement]placement of pop menu'bottomLeft'|'bottomCenter'|'bottomRight'|'topLeft'|'topCenter'|'topRight''bottomLeft'
[nzSize]size of the button, the same as nz-buutton'large'|'small'|'default''default'
[nzType]type of the button, the same as nz-button'primary'|'ghost'|'dashed'|'danger'|'default''default'
[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 visibleboolean-
(nzVisibleChange)a callback function takes an argument: nzVisible, is executed when the visible state is changedEventEmitter<boolean>-
(nzClick)a callback function which will be executed when you click the button on the leftEventEmitter<MouseEvent>-

NzDropdownService#

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

PropertyDescriptionArgumentsReturn Value
createcreate dropdown($event:MouseEvent, template:TemplateRef<void>)NzDropdownContextComponent
closeclose dropdown--