Menu导航菜单

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

何时使用

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

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

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

代码演示

Menu导航菜单 - 图1

顶部导航

水平的顶部导航菜单。

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

Menu导航菜单 - 图3

缩起内嵌菜单

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

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

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

Menu导航菜单 - 图4

只展开当前父级菜单

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

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

Menu导航菜单 - 图5

垂直菜单

子菜单是弹出的形式。

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

Menu导航菜单 - 图7

切换菜单类型

展示动态切换模式。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-menu-switch-mode',
  4. template: `
  5. <nz-switch [(ngModel)]="mode"></nz-switch>
  6. Change Mode
  7. <nz-divider nzType="vertical"></nz-divider>
  8. <nz-switch [(ngModel)]="dark"></nz-switch>
  9. Change Theme
  10. <br />
  11. <br />
  12. <ul nz-menu [nzMode]="mode ? 'vertical' : 'inline'" [nzTheme]="dark ? 'dark' : 'light'">
  13. <li nz-submenu nzTitle="Navigation One" nzIcon="mail">
  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 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. styles: [
  51. `
  52. [nz-menu] {
  53. width: 240px;
  54. }
  55. `
  56. ]
  57. })
  58. export class NzDemoMenuSwitchModeComponent {
  59. mode = false;
  60. dark = false;
  61. }

Menu导航菜单 - 图8

配合路由使用

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

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

Menu导航菜单 - 图9

递归生成菜单

递归生成菜单,需要手动指定 nzPaddingLeft,仅在 nzModeinline 的模式,且 nzInlineCollapsedfalse 的情况下有效。

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

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

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>
  2. <li nz-submenu><span title><i nz-icon nzType="appstore"></i><span>SubTitle</span></span></li>
  3. <li nz-submenu [nzTitle]="titleTpl"></li>
  4. <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>
  2. <li nz-menu-group><span title><i nz-icon nzType="appstore"></i><span>SubTitle</span></span></li>
  3. <li nz-menu-group [nzTitle]="titleTpl"></li>
  4. <ng-template #titleTpl><i nz-icon nzType="appstore"></i><span>SubTitle</span></ng-template>
参数说明类型默认值
[nzTitle]标题内容string | TemplateRef<void>-

[nz-menu-divider]directive

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