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

    Menu导航菜单

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

    何时使用

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

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

    单独引入此组件

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

    1. import { NzMenuModule } from 'ng-zorro-antd/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 nzSelected>
    8.         <i nz-icon nzType="mail"></i>
    9.         Navigation One
    10.       </li>
    11.       <li nz-menu-item nzDisabled>
    12.         <i nz-icon nzType="appstore"></i>
    13.         Navigation Two
    14.       </li>
    15.       <li nz-submenu nzTitle="Navigation Three - Submenu" nzIcon="setting">
    16.         <ul>
    17.           <li nz-menu-group nzTitle="Item 1">
    18.             <ul>
    19.               <li nz-menu-item>Option 1</li>
    20.               <li nz-menu-item>Option 2</li>
    21.             </ul>
    22.           </li>
    23.           <li nz-menu-group nzTitle="Item 2">
    24.             <ul>
    25.               <li nz-menu-item>Option 3</li>
    26.               <li nz-menu-item>Option 4</li>
    27.               <li nz-submenu nzTitle="Sub Menu">
    28.                 <ul>
    29.                   <li nz-menu-item nzDisabled>Option 5</li>
    30.                   <li nz-menu-item>Option 6</li>
    31.                 </ul>
    32.               </li>
    33.               <li nz-submenu nzDisabled nzTitle="Disabled Sub Menu">
    34.                 <ul>
    35.                   <li nz-menu-item>Option 5</li>
    36.                   <li nz-menu-item>Option 6</li>
    37.                 </ul>
    38.               </li>
    39.             </ul>
    40.           </li>
    41.         </ul>
    42.       </li>
    43.       <li nz-menu-item>
    44.         <a href="https://ng.ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
    45.       </li>
    46.     </ul>
    47.   `
    48. })
    49. 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">
    7.       <li nz-submenu nzTitle="Navigation One" nzIcon="mail" nzOpen>
    8.         <ul>
    9.           <li nz-menu-group nzTitle="Item 1">
    10.             <ul>
    11.               <li nz-menu-item nzSelected>Option 1</li>
    12.               <li nz-menu-item>Option 2</li>
    13.             </ul>
    14.           </li>
    15.           <li nz-menu-group nzTitle="Item 2">
    16.             <ul>
    17.               <li nz-menu-item>Option 3</li>
    18.               <li nz-menu-item>Option 4</li>
    19.             </ul>
    20.           </li>
    21.         </ul>
    22.       </li>
    23.       <li nz-submenu nzTitle="Navigation Two" nzIcon="appstore">
    24.         <ul>
    25.           <li nz-menu-item>Option 5</li>
    26.           <li nz-menu-item>Option 6</li>
    27.           <li nz-submenu nzTitle="Submenu">
    28.             <ul>
    29.               <li nz-menu-item>Option 7</li>
    30.               <li nz-menu-item>Option 8</li>
    31.               <li nz-submenu nzTitle="Submenu">
    32.                 <ul>
    33.                   <li nz-menu-item>Option 9</li>
    34.                   <li nz-menu-item>Option 10</li>
    35.                 </ul>
    36.               </li>
    37.             </ul>
    38.           </li>
    39.         </ul>
    40.       </li>
    41.       <li nz-submenu nzTitle="Navigation Three" nzIcon="setting">
    42.         <ul>
    43.           <li nz-menu-item>Option 11</li>
    44.           <li nz-menu-item>Option 12</li>
    45.           <li nz-menu-item>Option 13</li>
    46.         </ul>
    47.       </li>
    48.     </ul>
    49.   `,
    50.   styles: [
    51.     `
    52.       [nz-menu] {
    53.         width: 240px;
    54.       }
    55.     `
    56.   ]
    57. })
    58. 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 class="wrapper">
    7.       <button nz-button nzType="primary" (click)="toggleCollapsed()">
    8.         <i nz-icon [nzType]="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' : ''" nzSelected>
    12.           <i nz-icon nzType="mail"></i>
    13.           <span>Navigation One</span>
    14.         </li>
    15.         <li nz-submenu nzTitle="Navigation Two" nzIcon="appstore">
    16.           <ul>
    17.             <li nz-menu-item>Option 5</li>
    18.             <li nz-menu-item>Option 6</li>
    19.             <li nz-submenu nzTitle="Submenu">
    20.               <ul>
    21.                 <li nz-menu-item>Option 7</li>
    22.                 <li nz-menu-item>Option 8</li>
    23.               </ul>
    24.             </li>
    25.           </ul>
    26.         </li>
    27.         <li nz-submenu nzTitle="Navigation Three" nzIcon="setting">
    28.           <ul>
    29.             <li nz-menu-item>Option 9</li>
    30.             <li nz-menu-item>Option 10</li>
    31.             <li nz-menu-item>Option 11</li>
    32.           </ul>
    33.         </li>
    34.       </ul>
    35.     </div>
    36.   `,
    37.   styles: [
    38.     `
    39.       .wrapper {
    40.         width: 240px;
    41.       }
    43.       button {
    44.         margin-bottom: 12px;
    45.       }
    46.     `
    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
    8.         nz-submenu
    9.         [(nzOpen)]="openMap.sub1"
    10.         (nzOpenChange)="openHandler('sub1')"
    11.         nzTitle="Navigation One"
    12.         nzIcon="mail"
    13.       >
    14.         <ul>
    15.           <li nz-menu-group nzTitle="Item 1">
    16.             <ul>
    17.               <li nz-menu-item>Option 1</li>
    18.               <li nz-menu-item>Option 2</li>
    19.             </ul>
    20.           </li>
    21.           <li nz-menu-group nzTitle="Item 2">
    22.             <ul>
    23.               <li nz-menu-item>Option 3</li>
    24.               <li nz-menu-item>Option 4</li>
    25.             </ul>
    26.           </li>
    27.         </ul>
    28.       </li>
    29.       <li
    30.         nz-submenu
    31.         [(nzOpen)]="openMap.sub2"
    32.         (nzOpenChange)="openHandler('sub2')"
    33.         nzTitle="Navigation Two"
    34.         nzIcon="appstore"
    35.       >
    36.         <ul>
    37.           <li nz-menu-item>Option 5</li>
    38.           <li nz-menu-item>Option 6</li>
    39.           <li nz-submenu nzTitle="Submenu">
    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
    48.         nz-submenu
    49.         [(nzOpen)]="openMap.sub3"
    50.         (nzOpenChange)="openHandler('sub3')"
    51.         nzTitle="Navigation Three"
    52.         nzIcon="setting"
    53.       >
    54.         <ul>
    55.           <li nz-menu-item>Option 9</li>
    56.           <li nz-menu-item>Option 10</li>
    57.           <li nz-menu-item>Option 11</li>
    58.         </ul>
    59.       </li>
    60.     </ul>
    61.   `
    62. })
    63. export class NzDemoMenuSiderCurrentComponent {
    64.   openMap: { [name: string]: boolean } = {
    65.     sub1: true,
    66.     sub2: false,
    67.     sub3: false
    68.   };
    70.   openHandler(value: string): void {
    71.     for (const key in this.openMap) {
    72.       if (key !== value) {
    73.         this.openMap[key] = false;
    74.       }
    75.     }
    76.   }
    77. }

    Menu导航菜单 - 图5

    垂直菜单

    子菜单是弹出的形式。

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

    Menu导航菜单 - 图6

    主题

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

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

    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'">
    14.       <li nz-submenu nzTitle="Navigation One" nzIcon="mail">
    15.         <ul>
    16.           <li nz-menu-group nzTitle="Item 1">
    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 nzTitle="Item 2">
    23.             <ul>
    24.               <li nz-menu-item>Option 3</li>
    25.               <li nz-menu-item>Option 4</li>
    26.             </ul>
    27.           </li>
    28.         </ul>
    29.       </li>
    30.       <li nz-submenu nzTitle="Navigation Two" nzIcon="appstore">
    31.         <ul>
    32.           <li nz-menu-item>Option 5</li>
    33.           <li nz-menu-item>Option 6</li>
    34.           <li nz-submenu nzTitle="Submenu">
    35.             <ul>
    36.               <li nz-menu-item>Option 7</li>
    37.               <li nz-menu-item>Option 8</li>
    38.             </ul>
    39.           </li>
    40.         </ul>
    41.       </li>
    42.       <li nz-submenu nzTitle="Navigation Three" nzIcon="setting">
    43.         <ul>
    44.           <li nz-menu-item>Option 9</li>
    45.           <li nz-menu-item>Option 10</li>
    46.           <li nz-menu-item>Option 11</li>
    47.         </ul>
    48.       </li>
    49.     </ul>
    50.   `,
    51.   styles: [
    52.     `
    53.       [nz-menu] {
    54.         width: 240px;
    55.       }
    56.     `
    57.   ]
    58. })
    59. export class NzDemoMenuSwitchModeComponent {
    60.   mode = false;
    61.   dark = false;
    62. }

    Menu导航菜单 - 图8

    配合路由使用

    自动根据路由激活菜单项，需要结合 routerLink 一起使用。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-menu-router',
    5.   template: `
    6.     <ul nz-menu nzMode="horizontal">
    7.       <li nz-menu-item nzMatchRouter>
    8.         <a [routerLink]="['/', 'components', 'menu', 'en']">English Menu Document</a>
    9.       </li>
    10.       <li nz-menu-item nzMatchRouter>
    11.         <a [routerLink]="['/', 'components', 'menu', 'zh']">Chinese Menu Document</a>
    12.       </li>
    13.     </ul>
    14.   `
    15. })
    16. export class NzDemoMenuRouterComponent {}

    Menu导航菜单 - 图9

    递归生成菜单

    递归生成菜单，需要手动指定 nzPaddingLeft，仅在 nzMode 为 inline 的模式，且 nzInlineCollapsed 为 false 的情况下有效。

    追踪 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.             *ngIf="!menu.children"
    12.             nz-menu-item
    13.             [nzPaddingLeft]="menu.level * 24"
    14.             [nzDisabled]="menu.disabled"
    15.             [nzSelected]="menu.selected"
    16.           >
    17.             <i nz-icon [nzType]="menu.icon" *ngIf="menu.icon"></i>
    18.             <span>{{ menu.title }}</span>
    19.           </li>
    20.           <li
    21.             *ngIf="menu.children"
    22.             nz-submenu
    23.             [nzPaddingLeft]="menu.level * 24"
    24.             [nzOpen]="menu.open"
    25.             [nzTitle]="menu.title"
    26.             [nzIcon]="menu.icon"
    27.             [nzDisabled]="menu.disabled"
    28.           >
    29.             <ul>
    30.               <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children }"></ng-container>
    31.             </ul>
    32.           </li>
    33.         </ng-container>
    34.       </ng-template>
    35.     </ul>
    36.   `
    37. })
    38. export class NzDemoMenuRecursiveComponent {
    39.   mode = false;
    40.   dark = false;
    41.   menus = [
    42.     {
    43.       level: 1,
    44.       title: 'Mail Group',
    45.       icon: 'mail',
    46.       open: true,
    47.       selected: false,
    48.       disabled: false,
    49.       children: [
    50.         {
    51.           level: 2,
    52.           title: 'Group 1',
    53.           icon: 'bars',
    54.           open: false,
    55.           selected: false,
    56.           disabled: false,
    57.           children: [
    58.             {
    59.               level: 3,
    60.               title: 'Option 1',
    61.               selected: false,
    62.               disabled: false
    63.             },
    64.             {
    65.               level: 3,
    66.               title: 'Option 2',
    67.               selected: false,
    68.               disabled: true
    69.             }
    70.           ]
    71.         },
    72.         {
    73.           level: 2,
    74.           title: 'Group 2',
    75.           icon: 'bars',
    76.           selected: true,
    77.           disabled: false
    78.         },
    79.         {
    80.           level: 2,
    81.           title: 'Group 3',
    82.           icon: 'bars',
    83.           selected: false,
    84.           disabled: false
    85.         }
    86.       ]
    87.     },
    88.     {
    89.       level: 1,
    90.       title: 'Team Group',
    91.       icon: 'team',
    92.       open: false,
    93.       selected: false,
    94.       disabled: false,
    95.       children: [
    96.         {
    97.           level: 2,
    98.           title: 'User 1',
    99.           icon: 'user',
    100.           selected: false,
    101.           disabled: false
    102.         },
    103.         {
    104.           level: 2,
    105.           title: 'User 2',
    106.           icon: 'user',
    107.           selected: false,
    108.           disabled: false
    109.         }
    110.       ]
    111.     }
    112.   ];
    113. }

    API

    1. <ul nz-menu>
    2.   <li nz-menu-item>Menu 1</li>
    3.   <li nz-menu-item>Menu 2</li>
    4.   <li nz-submenu nzTitle="SubMenu Title">
    5.     <ul>
    6.       <li nz-menu-item>SubMenu Item 1</li>
    7.       <li nz-menu-item>SubMenu Item 2</li>
    8.       <li nz-menu-item>SubMenu Item 3</li>
    9.     </ul>
    10.   </li>
    11. </ul>

    [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
    [nzMatchRouter]是否根据 routerLink 自动设定 nzSelectedbooleanfalse
    [nzMatchRouterExact]是否路由完整精确匹配, 详见 routerLinkActiveOptionsbooleanfalse

    [nz-submenu]directive

    你可以使用以下三种方式来定义 nz-submenu 的标题

    1. <li nz-submenu nzTitle="SubTitle" nzIcon="appstore"></li>
    3. <li nz-submenu><span title><i nz-icon nzType="appstore"></i><span>SubTitle</span></span></li>
    5. <li nz-submenu [nzTitle]="titleTpl"></li>
    6. <ng-template #titleTpl><i nz-icon nzType="appstore"></i><span>SubTitle</span></ng-template>
    参数说明类型默认值
    [nzOpen]是否展开，可双向绑定booleanfalse
    [nzDisabled]是否禁用booleanfalse
    [nzTitle]标题内容string | TemplateRef<void>-
    [nzIcon]标题中 icon 类型string-
    [nzMenuClassName]自定义子菜单容器类名string-
    (nzOpenChange)展开回调EventEmitter<boolean>-

    [nz-menu-group]directive

    你可以使用以下三种方式来定义 nz-menu-group 的标题

    1. <li nz-menu-group nzTitle="SubTitle" nzIcon="appstore"></li>
    3. <li nz-menu-group><span title><i nz-icon nzType="appstore"></i><span>SubTitle</span></span></li>
    5. <li nz-menu-group [nzTitle]="titleTpl"></li>
    6. <ng-template #titleTpl><i nz-icon nzType="appstore"></i><span>SubTitle</span></ng-template>
    参数说明类型默认值
    [nzTitle]标题内容string | TemplateRef<void>-

    [nz-menu-divider]directive

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