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 nzTooltipPlacement="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 nz-submenu [(nzOpen)]="openMap.sub1" (nzOpenChange)="openHandler('sub1')" 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 [(nzOpen)]="openMap.sub2" (nzOpenChange)="openHandler('sub2')" 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 [(nzOpen)]="openMap.sub3" (nzOpenChange)="openHandler('sub3')" 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 NzDemoMenuSiderCurrentComponent {
  46.   openMap: { [name: string]: boolean } = {
  47.     sub1: true,
  48.     sub2: false,
  49.     sub3: false
  50.   };
  52.   openHandler(value: string): void {
  53.     for (const key in this.openMap) {
  54.       if (key !== value) {
  55.         this.openMap[key] = false;
  56.       }
  57.     }
  58.   }
  59. }

Menu导航菜单 - 图5

垂直菜单

子菜单是弹出的形式。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-menu-vertical',
  5.   template: `
  6.     <ul nz-menu [nzMode]="'vertical'">
  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.   styles: [
  45.     `
  46.       [nz-menu] {
  47.         width: 240px;
  48.       }
  49.     `
  50.   ]
  51. })
  52. export class NzDemoMenuVerticalComponent {
  53.   change(value: boolean): void {
  54.     console.log(value);
  55.   }
  56. }

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

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