• Menu导航菜单
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • [nz-menu]directive
      • [nz-menu-item]directive
      • [nz-submenu]directive
      • [nz-menu-group]directive
      • [nz-menu-divider]directive

    Menu导航菜单

    为页面和功能提供导航的菜单列表。

    何时使用

    导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

    更多布局和导航的使用可以参考：通用布局。

    代码演示

    Menu导航菜单 - 图1

    顶部导航

    水平的顶部导航菜单。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-menu-horizontal',
    5.   template: `
    6.     <ul nz-menu [nzMode]="'horizontal'">
    7.       <li nz-menu-item><i nz-icon type="mail"></i> Navigation One</li>
    8.       <li nz-menu-item nzDisabled><i nz-icon type="appstore"></i> Navigation Two</li>
    9.       <li nz-submenu>
    10.         <span title><i nz-icon type="setting"></i> Navigation Three - Submenu</span>
    11.         <ul>
    12.           <li nz-menu-group>
    13.             <span title>Item 1</span>
    14.             <ul>
    15.               <li nz-menu-item>Option 1</li>
    16.               <li nz-menu-item>Option 2</li>
    17.             </ul>
    18.           </li>
    19.           <li nz-menu-group>
    20.             <span title>Item 2</span>
    21.             <ul>
    22.               <li nz-menu-item>Option 3</li>
    23.               <li nz-menu-item>Option 4</li>
    24.               <li nz-submenu>
    25.                 <span title>Sub Menu</span>
    26.                 <ul>
    27.                   <li nz-menu-item nzDisabled>Option 5</li>
    28.                   <li nz-menu-item>Option 6</li>
    29.                 </ul>
    30.               </li>
    31.               <li nz-submenu nzDisabled>
    32.                 <span title>Disabled Sub Menu</span>
    33.                 <ul>
    34.                   <li nz-menu-item>Option 5</li>
    35.                   <li nz-menu-item>Option 6</li>
    36.                 </ul>
    37.               </li>
    38.             </ul>
    39.           </li>
    40.         </ul>
    41.       </li>
    42.       <li nz-menu-item>
    43.         <a href="https://ng.ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
    44.       </li>
    45.     </ul>
    46.   `
    47. })
    48. export class NzDemoMenuHorizontalComponent {}

    Menu导航菜单 - 图2

    内嵌菜单

    垂直菜单，子菜单内嵌在菜单区域。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-menu-inline',
    5.   template: `
    6.     <ul nz-menu [nzMode]="'inline'" style="width: 240px;">
    7.       <li nz-submenu>
    8.         <span title><i nz-icon type="mail"></i> Navigation One</span>
    9.         <ul>
    10.           <li nz-menu-group>
    11.             <span title>Item 1</span>
    12.             <ul>
    13.               <li nz-menu-item>Option 1</li>
    14.               <li nz-menu-item>Option 2</li>
    15.             </ul>
    16.           </li>
    17.           <li nz-menu-group>
    18.             <span title>Item 2</span>
    19.             <ul>
    20.               <li nz-menu-item>Option 3</li>
    21.               <li nz-menu-item>Option 4</li>
    22.             </ul>
    23.           </li>
    24.         </ul>
    25.       </li>
    26.       <li nz-submenu>
    27.         <span title><i nz-icon type="appstore"></i> Navigation Two</span>
    28.         <ul>
    29.           <li nz-menu-item>Option 5</li>
    30.           <li nz-menu-item>Option 6</li>
    31.           <li nz-submenu>
    32.             <span title>Submenu</span>
    33.             <ul>
    34.               <li nz-menu-item>Option 7</li>
    35.               <li nz-menu-item>Option 8</li>
    36.               <li nz-submenu>
    37.                 <span title>Submenu</span>
    38.                 <ul>
    39.                   <li nz-menu-item>Option 9</li>
    40.                   <li nz-menu-item>Option 10</li>
    41.                 </ul>
    42.               </li>
    43.             </ul>
    44.           </li>
    45.         </ul>
    46.       </li>
    47.       <li nz-submenu>
    48.         <span title><i nz-icon type="setting"></i> Navigation Three</span>
    49.         <ul>
    50.           <li nz-menu-item>Option 11</li>
    51.           <li nz-menu-item>Option 12</li>
    52.           <li nz-menu-item>Option 13</li>
    53.         </ul>
    54.       </li>
    55.     </ul>
    56.   `,
    57.   styles: []
    58. })
    59. export class NzDemoMenuInlineComponent {}

    Menu导航菜单 - 图3

    缩起内嵌菜单

    内嵌菜单可以被缩起/展开。

    你可以在 Layout 里查看侧边布局结合的完整示例。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-menu-inline-collapsed',
    5.   template: `
    6.     <div style="width: 240px;">
    7.       <button nz-button [nzType]="'primary'" (click)="toggleCollapsed()" style="margin-bottom: 10px;">
    8.         <i nz-icon [type]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
    9.       </button>
    10.       <ul nz-menu [nzMode]="'inline'" nzTheme="dark" [nzInlineCollapsed]="isCollapsed">
    11.         <li nz-menu-item nz-tooltip nzPlacement="right" [nzTitle]="isCollapsed ? 'Navigation One' : ''">
    12.           <span title>
    13.             <i nz-icon type="mail"></i>
    14.             <span>Navigation One</span>
    15.           </span>
    16.         </li>
    17.         <li nz-submenu>
    18.           <span title>
    19.             <i nz-icon type="appstore"></i>
    20.             <span>Navigation Two</span>
    21.           </span>
    22.           <ul>
    23.             <li nz-menu-item>Option 5</li>
    24.             <li nz-menu-item>Option 6</li>
    25.             <li nz-submenu>
    26.               <span title>Submenu</span>
    27.               <ul>
    28.                 <li nz-menu-item>Option 7</li>
    29.                 <li nz-menu-item>Option 8</li>
    30.               </ul>
    31.             </li>
    32.           </ul>
    33.         </li>
    34.         <li nz-submenu>
    35.           <span title>
    36.             <i nz-icon type="setting"></i>
    37.             <span>Navigation Three</span>
    38.           </span>
    39.           <ul>
    40.             <li nz-menu-item>Option 9</li>
    41.             <li nz-menu-item>Option 10</li>
    42.             <li nz-menu-item>Option 11</li>
    43.           </ul>
    44.         </li>
    45.       </ul>
    46.     </div>
    47.   `
    48. })
    49. export class NzDemoMenuInlineCollapsedComponent {
    50.   isCollapsed = false;
    52.   toggleCollapsed(): void {
    53.     this.isCollapsed = !this.isCollapsed;
    54.   }
    55. }

    Menu导航菜单 - 图4

    只展开当前父级菜单

    点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-menu-sider-current',
    5.   template: `
    6.     <ul nz-menu [nzMode]="'inline'" style="width: 240px;">
    7.       <li nz-submenu [(nzOpen)]="openMap.sub1" (nzOpenChange)="openHandler('sub1')">
    8.         <span title><i nz-icon type="mail"></i> Navigation One</span>
    9.         <ul>
    10.           <li nz-menu-group>
    11.             <span title>Item 1</span>
    12.             <ul>
    13.               <li nz-menu-item>Option 1</li>
    14.               <li nz-menu-item>Option 2</li>
    15.             </ul>
    16.           </li>
    17.           <li nz-menu-group>
    18.             <span title>Item 2</span>
    19.             <ul>
    20.               <li nz-menu-item>Option 3</li>
    21.               <li nz-menu-item>Option 4</li>
    22.             </ul>
    23.           </li>
    24.         </ul>
    25.       </li>
    26.       <li nz-submenu [(nzOpen)]="openMap.sub2" (nzOpenChange)="openHandler('sub2')">
    27.         <span title><i nz-icon type="appstore"></i> Navigation Two</span>
    28.         <ul>
    29.           <li nz-menu-item>Option 5</li>
    30.           <li nz-menu-item>Option 6</li>
    31.           <li nz-submenu>
    32.             <span title>Submenu</span>
    33.             <ul>
    34.               <li nz-menu-item>Option 7</li>
    35.               <li nz-menu-item>Option 8</li>
    36.             </ul>
    37.           </li>
    38.         </ul>
    39.       </li>
    40.       <li nz-submenu [(nzOpen)]="openMap.sub3" (nzOpenChange)="openHandler('sub3')">
    41.         <span title><i nz-icon type="setting"></i> Navigation Three</span>
    42.         <ul>
    43.           <li nz-menu-item>Option 9</li>
    44.           <li nz-menu-item>Option 10</li>
    45.           <li nz-menu-item>Option 11</li>
    46.         </ul>
    47.       </li>
    48.     </ul>
    49.   `,
    50.   styles: []
    51. })
    52. export class NzDemoMenuSiderCurrentComponent {
    53.   openMap: { [name: string]: boolean } = {
    54.     sub1: true,
    55.     sub2: false,
    56.     sub3: false
    57.   };
    59.   openHandler(value: string): void {
    60.     for (const key in this.openMap) {
    61.       if (key !== value) {
    62.         this.openMap[key] = false;
    63.       }
    64.     }
    65.   }
    66. }

    Menu导航菜单 - 图5

    垂直菜单

    子菜单是弹出的形式。

    1. import { Component } from '@angular/core';
    2. @Component({
    3.   selector: 'nz-demo-menu-vertical',
    4.   template: `
    5.     <ul nz-menu [nzMode]="'vertical'" style="width: 240px;">
    6.       <li nz-submenu>
    7.         <span title><i nz-icon type="mail"></i> Navigation One</span>
    8.         <ul>
    9.           <li nz-menu-group>
    10.             <span title>Item 1</span>
    11.             <ul>
    12.               <li nz-menu-item>Option 1</li>
    13.               <li nz-menu-item>Option 2</li>
    14.             </ul>
    15.           </li>
    16.           <li nz-menu-group>
    17.             <span title>Item 2</span>
    18.             <ul>
    19.               <li nz-menu-item>Option 3</li>
    20.               <li nz-menu-item>Option 4</li>
    21.             </ul>
    22.           </li>
    23.         </ul>
    24.       </li>
    25.       <li nz-submenu (nzOpenChange)="change($event)">
    26.         <span title><i nz-icon type="appstore"></i> Navigation Two</span>
    27.         <ul>
    28.           <li nz-menu-item>Option 5</li>
    29.           <li nz-menu-item>Option 6</li>
    30.           <li nz-submenu>
    31.             <span title>Submenu</span>
    32.             <ul>
    33.               <li nz-menu-item>Option 7</li>
    34.               <li nz-menu-item>Option 8</li>
    35.             </ul>
    36.           </li>
    37.         </ul>
    38.       </li>
    39.       <li nz-submenu>
    40.         <span title><i nz-icon type="setting"></i> Navigation Three</span>
    41.         <ul>
    42.           <li nz-menu-item>Option 9</li>
    43.           <li nz-menu-item>Option 10</li>
    44.           <li nz-menu-item>Option 11</li>
    45.         </ul>
    46.       </li>
    47.     </ul>
    48.   `,
    49.   styles: []
    50. })
    51. export class NzDemoMenuVerticalComponent {
    52.   change(value: boolean): void {
    53.     console.log(value);
    54.   }
    55. }

    Menu导航菜单 - 图6

    主题

    内建了两套主题 light|dark，默认 light。

    1. import { Component } from '@angular/core';
    2. @Component({
    3.   selector: 'nz-demo-menu-theme',
    4.   template: `
    5.     <nz-switch [(ngModel)]="theme">
    6.       <span checked>Dark</span>
    7.       <span unchecked>Light</span>
    8.     </nz-switch>
    9.     <br />
    10.     <br />
    11.     <ul nz-menu [nzMode]="'inline'" style="width: 240px;" [nzTheme]="theme ? 'dark' : 'light'">
    12.       <li nz-submenu nzOpen>
    13.         <span title><i nz-icon type="mail"></i> Navigation One</span>
    14.         <ul>
    15.           <li nz-menu-group>
    16.             <span title>Item 1</span>
    17.             <ul>
    18.               <li nz-menu-item>Option 1</li>
    19.               <li nz-menu-item>Option 2</li>
    20.             </ul>
    21.           </li>
    22.           <li nz-menu-group>
    23.             <span title>Item 2</span>
    24.             <ul>
    25.               <li nz-menu-item>Option 3</li>
    26.               <li nz-menu-item>Option 4</li>
    27.             </ul>
    28.           </li>
    29.         </ul>
    30.       </li>
    31.       <li nz-submenu>
    32.         <span title><i nz-icon type="appstore"></i> Navigation Two</span>
    33.         <ul>
    34.           <li nz-menu-item>Option 5</li>
    35.           <li nz-menu-item>Option 6</li>
    36.           <li nz-submenu>
    37.             <span title>Submenu</span>
    38.             <ul>
    39.               <li nz-menu-item>Option 7</li>
    40.               <li nz-menu-item>Option 8</li>
    41.             </ul>
    42.           </li>
    43.         </ul>
    44.       </li>
    45.       <li nz-submenu>
    46.         <span title><i nz-icon type="setting"></i> Navigation Three</span>
    47.         <ul>
    48.           <li nz-menu-item>Option 9</li>
    49.           <li nz-menu-item>Option 10</li>
    50.           <li nz-menu-item>Option 11</li>
    51.         </ul>
    52.       </li>
    53.     </ul>
    54.   `,
    55.   styles: []
    56. })
    57. export class NzDemoMenuThemeComponent {
    58.   theme = true;
    59. }

    Menu导航菜单 - 图7

    切换菜单类型

    展示动态切换模式。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-menu-switch-mode',
    5.   template: `
    6.     <nz-switch [(ngModel)]="mode"> </nz-switch>
    7.     Change Mode
    8.     <nz-divider nzType="vertical"></nz-divider>
    9.     <nz-switch [(ngModel)]="dark"> </nz-switch>
    10.     Change Theme
    11.     <br />
    12.     <br />
    13.     <ul nz-menu [nzMode]="mode ? 'vertical' : 'inline'" [nzTheme]="dark ? 'dark' : 'light'" style="width: 240px;">
    14.       <li nz-submenu>
    15.         <span title><i nz-icon type="mail"></i> Navigation One</span>
    16.         <ul>
    17.           <li nz-menu-group>
    18.             <span title>Item 1</span>
    19.             <ul>
    20.               <li nz-menu-item>Option 1</li>
    21.               <li nz-menu-item>Option 2</li>
    22.             </ul>
    23.           </li>
    24.           <li nz-menu-group>
    25.             <span title>Item 2</span>
    26.             <ul>
    27.               <li nz-menu-item>Option 3</li>
    28.               <li nz-menu-item>Option 4</li>
    29.             </ul>
    30.           </li>
    31.         </ul>
    32.       </li>
    33.       <li nz-submenu>
    34.         <span title><i nz-icon type="appstore"></i> Navigation Two</span>
    35.         <ul>
    36.           <li nz-menu-item>Option 5</li>
    37.           <li nz-menu-item>Option 6</li>
    38.           <li nz-submenu>
    39.             <span title>Submenu</span>
    40.             <ul>
    41.               <li nz-menu-item>Option 7</li>
    42.               <li nz-menu-item>Option 8</li>
    43.             </ul>
    44.           </li>
    45.         </ul>
    46.       </li>
    47.       <li nz-submenu>
    48.         <span title><i nz-icon type="setting"></i> Navigation Three</span>
    49.         <ul>
    50.           <li nz-menu-item>Option 9</li>
    51.           <li nz-menu-item>Option 10</li>
    52.           <li nz-menu-item>Option 11</li>
    53.         </ul>
    54.       </li>
    55.     </ul>
    56.   `,
    57.   styles: []
    58. })
    59. export class NzDemoMenuSwitchModeComponent {
    60.   mode = false;
    61.   dark = false;
    62. }

    Menu导航菜单 - 图8

    递归生成菜单

    递归生成菜单，需要手动指定 nzPaddingLeft，仅在 inline 模式下有效。

    追踪 Angular Issue：https://github.com/angular/angular/issues/14842

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-menu-recursive',
    5.   template: `
    6.     <ul nz-menu [nzMode]="'inline'" style="width: 240px;">
    7.       <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
    8.       <ng-template #menuTpl let-menus>
    9.         <ng-container *ngFor="let menu of menus">
    10.           <li
    11.             nz-menu-item
    12.             [nzPaddingLeft]="menu.level * 24"
    13.             *ngIf="!menu.children"
    14.             [nzDisabled]="menu.disabled"
    15.             [nzSelected]="menu.selected"
    16.           >
    17.             <span title>
    18.               <i nz-icon [type]="menu.icon" *ngIf="menu.icon"></i>
    19.               <span>{{ menu.title }}</span>
    20.             </span>
    21.           </li>
    22.           <li
    23.             nz-submenu
    24.             [nzPaddingLeft]="menu.level * 24"
    25.             *ngIf="menu.children"
    26.             [nzOpen]="menu.open"
    27.             [nzDisabled]="menu.disabled"
    28.           >
    29.             <span title>
    30.               <i nz-icon [type]="menu.icon" *ngIf="menu.icon"></i>
    31.               <span>{{ menu.title }}</span>
    32.             </span>
    33.             <ul>
    34.               <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children }"></ng-container>
    35.             </ul>
    36.           </li>
    37.         </ng-container>
    38.       </ng-template>
    39.     </ul>
    40.   `,
    41.   styles: []
    42. })
    43. export class NzDemoMenuRecursiveComponent {
    44.   mode = false;
    45.   dark = false;
    46.   menus = [
    47.     {
    48.       level: 1,
    49.       title: 'Mail Group',
    50.       icon: 'mail',
    51.       open: true,
    52.       selected: false,
    53.       disabled: false,
    54.       children: [
    55.         {
    56.           level: 2,
    57.           title: 'Group 1',
    58.           icon: 'bars',
    59.           open: false,
    60.           selected: false,
    61.           disabled: false,
    62.           children: [
    63.             {
    64.               level: 3,
    65.               title: 'Option 1',
    66.               selected: false,
    67.               disabled: false
    68.             },
    69.             {
    70.               level: 3,
    71.               title: 'Option 2',
    72.               selected: false,
    73.               disabled: true
    74.             }
    75.           ]
    76.         },
    77.         {
    78.           level: 2,
    79.           title: 'Group 2',
    80.           icon: 'bars',
    81.           selected: true,
    82.           disabled: false
    83.         },
    84.         {
    85.           level: 2,
    86.           title: 'Group 3',
    87.           icon: 'bars',
    88.           selected: false,
    89.           disabled: false
    90.         }
    91.       ]
    92.     },
    93.     {
    94.       level: 1,
    95.       title: 'Team Group',
    96.       icon: 'team',
    97.       open: false,
    98.       selected: false,
    99.       disabled: false,
    100.       children: [
    101.         {
    102.           level: 2,
    103.           title: 'User 1',
    104.           icon: 'user',
    105.           selected: false,
    106.           disabled: false
    107.         },
    108.         {
    109.           level: 2,
    110.           title: 'User 2',
    111.           icon: 'user',
    112.           selected: false,
    113.           disabled: false
    114.         }
    115.       ]
    116.     }
    117.   ];
    118. }

    API

    1. <ul nz-menu>
    2.   <li nz-menu-item>菜单项</li>
    3.   <li nz-submenu>
    4.     <span title>子菜单</span>
    5.     <ul>
    6.       <li nz-menu-item>子菜单项</li>
    7.     </ul>
    8.   </li>
    9. </ul>

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

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

    [nz-menu]directive

    参数说明类型默认值
    [nzInlineCollapsed]inline 时菜单是否收起状态boolean-
    [nzInlineIndent]inline 模式的菜单缩进宽度number24
    [nzMode]菜单类型，现在支持垂直、水平、和内嵌模式三种'vertical'｜'horizontal'｜'inline''vertical'
    [nzSelectable]是否允许选中booleantrue
    [nzTheme]主题颜色'light'｜'dark''light'
    (nzClick)点击 nz-menu-item 输出属性EventEmitter<NzMenuItemDirective>

    [nz-menu-item]directive

    参数说明类型默认值
    [nzDisabled]是否禁用booleanfalse
    [nzSelected]是否被选中booleanfalse

    [nz-submenu]directive

    使用 title 标识符来标定子菜单标题部分

    参数说明类型默认值
    [nzOpen]是否展开，可双向绑定booleanfalse
    [nzDisabled]是否禁用booleanfalse
    [nzMenuClassName]自定义子菜单容器类名string-
    (nzOpenChange)展开回调EventEmitter<boolean>-

    [nz-menu-group]directive

    使用 title 标识符来标定标题部分

    [nz-menu-divider]directive

    菜单项分割线，只用在弹出菜单内。