Menu

Menu list of Navigation.

When To Use#

Navigation menu is important for a website, it helps users jump from one site section to another quickly. Mostly, it includes top navigation and side navigation. Top navigation provides all the category and functions of the website. Side navigation provides the Multi-level structure of the website.

More layouts with navigation: layout.

Examples

Horizontal top navigation menu.

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

@Component({
  selector: 'nz-demo-menu-horizontal',
  template: `
    <ul nz-menu [nzMode]="'horizontal'">
      <li nz-menu-item><i nz-icon type="mail"></i> Navigation One</li>
      <li nz-menu-item nzDisabled><i nz-icon type="appstore"></i> Navigation Two</li>
      <li nz-submenu>
        <span title><i nz-icon type="setting"></i> Navigation Three - Submenu</span>
        <ul>
          <li nz-menu-group>
            <span title>Item 1</span>
            <ul>
              <li nz-menu-item>Option 1</li>
              <li nz-menu-item>Option 2</li>
            </ul>
          </li>
          <li nz-menu-group>
            <span title>Item 2</span>
            <ul>
              <li nz-menu-item>Option 3</li>
              <li nz-menu-item>Option 4</li>
              <li nz-submenu>
                <span title>Sub Menu</span>
                <ul>
                  <li nz-menu-item nzDisabled>Option 5</li>
                  <li nz-menu-item>Option 6</li>
                </ul>
              </li>
              <li nz-submenu nzDisabled>
                <span title>Disabled Sub Menu</span>
                <ul>
                  <li nz-menu-item>Option 5</li>
                  <li nz-menu-item>Option 6</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-menu-item>
        <a href="https://ng.ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
      </li>
    </ul>
  `
})
export class NzDemoMenuHorizontalComponent {}
  • Navigation One
      • Item 1
          • Option 1
          • Option 2
      • Item 2
          • Option 3
          • Option 4
  • Navigation Two
      • Option 5
      • Option 6
      • Submenu
          • Option 7
          • Option 8
          • Submenu
              • Option 9
              • Option 10
  • Navigation Three
      • Option 11
      • Option 12
      • Option 13

Vertical menu with inline submenus.

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

@Component({
  selector: 'nz-demo-menu-inline',
  template: `
    <ul nz-menu [nzMode]="'inline'" style="width: 240px;">
      <li nz-submenu>
        <span title><i nz-icon type="mail"></i> Navigation One</span>
        <ul>
          <li nz-menu-group>
            <span title>Item 1</span>
            <ul>
              <li nz-menu-item>Option 1</li>
              <li nz-menu-item>Option 2</li>
            </ul>
          </li>
          <li nz-menu-group>
            <span title>Item 2</span>
            <ul>
              <li nz-menu-item>Option 3</li>
              <li nz-menu-item>Option 4</li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="appstore"></i> Navigation Two</span>
        <ul>
          <li nz-menu-item>Option 5</li>
          <li nz-menu-item>Option 6</li>
          <li nz-submenu>
            <span title>Submenu</span>
            <ul>
              <li nz-menu-item>Option 7</li>
              <li nz-menu-item>Option 8</li>
              <li nz-submenu>
                <span title>Submenu</span>
                <ul>
                  <li nz-menu-item>Option 9</li>
                  <li nz-menu-item>Option 10</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="setting"></i> Navigation Three</span>
        <ul>
          <li nz-menu-item>Option 11</li>
          <li nz-menu-item>Option 12</li>
          <li nz-menu-item>Option 13</li>
        </ul>
      </li>
    </ul>
  `,
  styles: []
})
export class NzDemoMenuInlineComponent {}
  • Navigation One
  • Navigation Two
      • Option 5
      • Option 6
      • Submenu
          • Option 7
          • Option 8
  • Navigation Three
      • Option 9
      • Option 10
      • Option 11

Inline menu could be collapsed.

Here is a complete demo with sider layout.

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

@Component({
  selector: 'nz-demo-menu-inline-collapsed',
  template: `
    <div style="width: 240px;">
      <button nz-button [nzType]="'primary'" (click)="toggleCollapsed()" style="margin-bottom: 10px;">
        <i nz-icon [type]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
      </button>
      <ul nz-menu [nzMode]="'inline'" nzTheme="dark" [nzInlineCollapsed]="isCollapsed">
        <li nz-menu-item nz-tooltip nzPlacement="right" [nzTitle]="isCollapsed ? 'Navigation One' : ''">
          <span title>
            <i nz-icon type="mail"></i>
            <span>Navigation One</span>
          </span>
        </li>
        <li nz-submenu>
          <span title>
            <i nz-icon type="appstore"></i>
            <span>Navigation Two</span>
          </span>
          <ul>
            <li nz-menu-item>Option 5</li>
            <li nz-menu-item>Option 6</li>
            <li nz-submenu>
              <span title>Submenu</span>
              <ul>
                <li nz-menu-item>Option 7</li>
                <li nz-menu-item>Option 8</li>
              </ul>
            </li>
          </ul>
        </li>
        <li nz-submenu>
          <span title>
            <i nz-icon type="setting"></i>
            <span>Navigation Three</span>
          </span>
          <ul>
            <li nz-menu-item>Option 9</li>
            <li nz-menu-item>Option 10</li>
            <li nz-menu-item>Option 11</li>
          </ul>
        </li>
      </ul>
    </div>
  `
})
export class NzDemoMenuInlineCollapsedComponent {
  isCollapsed = false;

  toggleCollapsed(): void {
    this.isCollapsed = !this.isCollapsed;
  }
}
  • Navigation One
      • Item 1
          • Option 1
          • Option 2
      • Item 2
          • Option 3
          • Option 4
  • Navigation Two
      • Option 5
      • Option 6
      • Submenu
          • Option 7
          • Option 8
  • Navigation Three
      • Option 9
      • Option 10
      • Option 11

Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.

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

@Component({
  selector: 'nz-demo-menu-sider-current',
  template: `
    <ul nz-menu [nzMode]="'inline'" style="width: 240px;">
      <li nz-submenu [(nzOpen)]="openMap.sub1" (nzOpenChange)="openHandler('sub1')">
        <span title><i nz-icon type="mail"></i> Navigation One</span>
        <ul>
          <li nz-menu-group>
            <span title>Item 1</span>
            <ul>
              <li nz-menu-item>Option 1</li>
              <li nz-menu-item>Option 2</li>
            </ul>
          </li>
          <li nz-menu-group>
            <span title>Item 2</span>
            <ul>
              <li nz-menu-item>Option 3</li>
              <li nz-menu-item>Option 4</li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-submenu [(nzOpen)]="openMap.sub2" (nzOpenChange)="openHandler('sub2')">
        <span title><i nz-icon type="appstore"></i> Navigation Two</span>
        <ul>
          <li nz-menu-item>Option 5</li>
          <li nz-menu-item>Option 6</li>
          <li nz-submenu>
            <span title>Submenu</span>
            <ul>
              <li nz-menu-item>Option 7</li>
              <li nz-menu-item>Option 8</li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-submenu [(nzOpen)]="openMap.sub3" (nzOpenChange)="openHandler('sub3')">
        <span title><i nz-icon type="setting"></i> Navigation Three</span>
        <ul>
          <li nz-menu-item>Option 9</li>
          <li nz-menu-item>Option 10</li>
          <li nz-menu-item>Option 11</li>
        </ul>
      </li>
    </ul>
  `,
  styles: []
})
export class NzDemoMenuSiderCurrentComponent {
  openMap: { [name: string]: boolean } = {
    sub1: true,
    sub2: false,
    sub3: false
  };

  openHandler(value: string): void {
    for (const key in this.openMap) {
      if (key !== value) {
        this.openMap[key] = false;
      }
    }
  }
}
  • Navigation One
  • Navigation Two
  • Navigation Three

Submenus open as pop-ups.

expand codeexpand code
import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-menu-vertical',
  template: `
    <ul nz-menu [nzMode]="'vertical'" style="width: 240px;">
      <li nz-submenu>
        <span title><i nz-icon type="mail"></i> Navigation One</span>
        <ul>
          <li nz-menu-group>
            <span title>Item 1</span>
            <ul>
              <li nz-menu-item>Option 1</li>
              <li nz-menu-item>Option 2</li>
            </ul>
          </li>
          <li nz-menu-group>
            <span title>Item 2</span>
            <ul>
              <li nz-menu-item>Option 3</li>
              <li nz-menu-item>Option 4</li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-submenu (nzOpenChange)="change($event)">
        <span title><i nz-icon type="appstore"></i> Navigation Two</span>
        <ul>
          <li nz-menu-item>Option 5</li>
          <li nz-menu-item>Option 6</li>
          <li nz-submenu>
            <span title>Submenu</span>
            <ul>
              <li nz-menu-item>Option 7</li>
              <li nz-menu-item>Option 8</li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="setting"></i> Navigation Three</span>
        <ul>
          <li nz-menu-item>Option 9</li>
          <li nz-menu-item>Option 10</li>
          <li nz-menu-item>Option 11</li>
        </ul>
      </li>
    </ul>
  `,
  styles: []
})
export class NzDemoMenuVerticalComponent {
  change(value: boolean): void {
    console.log(value);
  }
}


  • Navigation One
      • Item 1
          • Option 1
          • Option 2
      • Item 2
          • Option 3
          • Option 4
  • Navigation Two
      • Option 5
      • Option 6
      • Submenu
          • Option 7
          • Option 8
  • Navigation Three
      • Option 9
      • Option 10
      • Option 11

There are two built-in themes: 'light' and 'dark'. The default value is 'light'.

expand codeexpand code
import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-menu-theme',
  template: `
    <nz-switch [(ngModel)]="theme">
      <span checked>Dark</span>
      <span unchecked>Light</span>
    </nz-switch>
    <br />
    <br />
    <ul nz-menu [nzMode]="'inline'" style="width: 240px;" [nzTheme]="theme ? 'dark' : 'light'">
      <li nz-submenu nzOpen>
        <span title><i nz-icon type="mail"></i> Navigation One</span>
        <ul>
          <li nz-menu-group>
            <span title>Item 1</span>
            <ul>
              <li nz-menu-item>Option 1</li>
              <li nz-menu-item>Option 2</li>
            </ul>
          </li>
          <li nz-menu-group>
            <span title>Item 2</span>
            <ul>
              <li nz-menu-item>Option 3</li>
              <li nz-menu-item>Option 4</li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="appstore"></i> Navigation Two</span>
        <ul>
          <li nz-menu-item>Option 5</li>
          <li nz-menu-item>Option 6</li>
          <li nz-submenu>
            <span title>Submenu</span>
            <ul>
              <li nz-menu-item>Option 7</li>
              <li nz-menu-item>Option 8</li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="setting"></i> Navigation Three</span>
        <ul>
          <li nz-menu-item>Option 9</li>
          <li nz-menu-item>Option 10</li>
          <li nz-menu-item>Option 11</li>
        </ul>
      </li>
    </ul>
  `,
  styles: []
})
export class NzDemoMenuThemeComponent {
  theme = true;
}
Change Mode Change Theme

  • Navigation One
      • Item 1
          • Option 1
          • Option 2
      • Item 2
          • Option 3
          • Option 4
  • Navigation Two
      • Option 5
      • Option 6
      • Submenu
          • Option 7
          • Option 8
  • Navigation Three
      • Option 9
      • Option 10
      • Option 11

Show the dynamic switching mode (between 'inline' and 'vertical').

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

@Component({
  selector: 'nz-demo-menu-switch-mode',
  template: `
    <nz-switch [(ngModel)]="mode"> </nz-switch>
    Change Mode
    <nz-divider nzType="vertical"></nz-divider>
    <nz-switch [(ngModel)]="dark"> </nz-switch>
    Change Theme
    <br />
    <br />
    <ul nz-menu [nzMode]="mode ? 'vertical' : 'inline'" [nzTheme]="dark ? 'dark' : 'light'" style="width: 240px;">
      <li nz-submenu>
        <span title><i nz-icon type="mail"></i> Navigation One</span>
        <ul>
          <li nz-menu-group>
            <span title>Item 1</span>
            <ul>
              <li nz-menu-item>Option 1</li>
              <li nz-menu-item>Option 2</li>
            </ul>
          </li>
          <li nz-menu-group>
            <span title>Item 2</span>
            <ul>
              <li nz-menu-item>Option 3</li>
              <li nz-menu-item>Option 4</li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="appstore"></i> Navigation Two</span>
        <ul>
          <li nz-menu-item>Option 5</li>
          <li nz-menu-item>Option 6</li>
          <li nz-submenu>
            <span title>Submenu</span>
            <ul>
              <li nz-menu-item>Option 7</li>
              <li nz-menu-item>Option 8</li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="setting"></i> Navigation Three</span>
        <ul>
          <li nz-menu-item>Option 9</li>
          <li nz-menu-item>Option 10</li>
          <li nz-menu-item>Option 11</li>
        </ul>
      </li>
    </ul>
  `,
  styles: []
})
export class NzDemoMenuSwitchModeComponent {
  mode = false;
  dark = false;
}
  • Mail Group
      • Group 1
          • Option 1
          • Option 2
      • Group 2
      • Group 3
  • Team Group
      • User 1
      • User 2

Recursive generation menu, you need to set nzPaddingLeftmanually, only works in inline mode;

Track Angular Issue:https://github.com/angular/angular/issues/14842

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

@Component({
  selector: 'nz-demo-menu-recursive',
  template: `
    <ul nz-menu [nzMode]="'inline'" style="width: 240px;">
      <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
      <ng-template #menuTpl let-menus>
        <ng-container *ngFor="let menu of menus">
          <li
            nz-menu-item
            [nzPaddingLeft]="menu.level * 24"
            *ngIf="!menu.children"
            [nzDisabled]="menu.disabled"
            [nzSelected]="menu.selected"
          >
            <span title>
              <i nz-icon [type]="menu.icon" *ngIf="menu.icon"></i>
              <span>{{ menu.title }}</span>
            </span>
          </li>
          <li
            nz-submenu
            [nzPaddingLeft]="menu.level * 24"
            *ngIf="menu.children"
            [nzOpen]="menu.open"
            [nzDisabled]="menu.disabled"
          >
            <span title>
              <i nz-icon [type]="menu.icon" *ngIf="menu.icon"></i>
              <span>{{ menu.title }}</span>
            </span>
            <ul>
              <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children }"></ng-container>
            </ul>
          </li>
        </ng-container>
      </ng-template>
    </ul>
  `,
  styles: []
})
export class NzDemoMenuRecursiveComponent {
  mode = false;
  dark = false;
  menus = [
    {
      level: 1,
      title: 'Mail Group',
      icon: 'mail',
      open: true,
      selected: false,
      disabled: false,
      children: [
        {
          level: 2,
          title: 'Group 1',
          icon: 'bars',
          open: false,
          selected: false,
          disabled: false,
          children: [
            {
              level: 3,
              title: 'Option 1',
              selected: false,
              disabled: false
            },
            {
              level: 3,
              title: 'Option 2',
              selected: false,
              disabled: true
            }
          ]
        },
        {
          level: 2,
          title: 'Group 2',
          icon: 'bars',
          selected: true,
          disabled: false
        },
        {
          level: 2,
          title: 'Group 3',
          icon: 'bars',
          selected: false,
          disabled: false
        }
      ]
    },
    {
      level: 1,
      title: 'Team Group',
      icon: 'team',
      open: false,
      selected: false,
      disabled: false,
      children: [
        {
          level: 2,
          title: 'User 1',
          icon: 'user',
          selected: false,
          disabled: false
        },
        {
          level: 2,
          title: 'User 2',
          icon: 'user',
          selected: false,
          disabled: false
        }
      ]
    }
  ];
}

API#

<ul nz-menu>
  <li nz-menu-item>Menu</li>
  <li nz-submenu>
    <span title>SubMenu</span>
    <ul>
      <li nz-menu-item>SubMenuItem</li>
    </ul>
  </li>
</ul>

Import this Component Individually#

You can get more detail here.

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

[nz-menu]#

ParamDescriptionTypeDefault value
[nzInlineCollapsed]specifies the collapsed status when menu is inline modeboolean-
[nzInlineIndent]indent px of inline menu item on each levelnumber24
[nzMode]type of the menu; vertical, horizontal, and inline modes are supported'vertical'|'horizontal'|'inline''vertical'
[nzSelectable]allow selecting menu itemsbooleantrue
[nzTheme]color theme of the menu'light'|'dark''light'
(nzClick)the Output when click nz-menu-item inside nz-menuEventEmitter<NzMenuItemDirective>

[nz-menu-item]#

ParamDescriptionTypeDefault value
[nzDisabled]whether menu item is disabled or notbooleanfalse
[nzSelected]whether menu item is selected or notbooleanfalse

[nz-submenu]#

use title to mark the title of submenu

ParamDescriptionTypeDefault value
[nzOpen]whether sub menu is open or not, double bindingbooleanfalse
[nzDisabled]whether sub menu is disabled or notbooleanfalse
[nzMenuClassName]Custom the submenu container's class namestring-
(nzOpenChange)nzOpen callbackEventEmitter<boolean>-

[nz-menu-group]#

use title to mark the title of menu group

[nz-menu-divider]#

Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.