Menu导航菜单

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

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

    顶部导航

    水平的顶部导航菜单。

    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导航菜单 - 图4

    内嵌菜单

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

    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 {}

    缩起内嵌菜单

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

    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" [nzTooltipTitle]="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.       }
    42.       button {
    43.         margin-bottom: 12px;
    44.       }
    45.     `
    46.   ]
    47. })
    48. export class NzDemoMenuInlineCollapsedComponent {
    49.   isCollapsed = false;
    51.   toggleCollapsed(): void {
    52.     this.isCollapsed = !this.isCollapsed;
    53.   }
    54. }

    Menu导航菜单 - 图6

    只展开当前父级菜单

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

    垂直菜单

    子菜单是弹出的形式。

    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>
    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导航菜单 - 图8

    主题

    内建了两套主题 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. }

    切换菜单类型

    展示动态切换模式。

    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.               <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. }

    配合路由使用

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

    Menu导航菜单 - 图11

    递归生成菜单

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

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-menu-recursive',
    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. }
    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-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>

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