Menu导航菜单

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

何时使用#

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

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

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

代码演示

顶部导航

水平的顶部导航菜单。

expand codeexpand code
      加载中
  • bottomLeft
  • bottomCenter
  • bottomRight
  • topLeft
  • topCenter
  • topRight
弹出位置

支持 6 个弹出位置。

expand codeexpand code
      加载中
  • Navigation One
    • Item 1
      • Option 1
      • Option 2
    • Item 2
      • Option 3
      • Option 4
  • Navigation Two
    • Option 5
    • Option 6
    • Submenu
      • Option 7
      • Option 8
      • Submenu
        • Option 9
        • Option 10
  • Navigation Three
    • Option 11
    • Option 12
    • Option 13
内嵌菜单

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

expand codeexpand code
      加载中
  • Navigation One
  • Navigation Two
    • Option 5
    • Option 6
    • Submenu
      • Option 7
      • Option 8
  • Navigation Three
    • Option 9
    • Option 10
    • Option 11
缩起内嵌菜单

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

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

expand codeexpand code
      加载中
  • Navigation One
    • Item 1
      • Option 1
      • Option 2
    • Item 2
      • Option 3
      • Option 4
  • Navigation Two
    • Option 5
    • Option 6
    • Submenu
      • Option 7
      • Option 8
  • Navigation Three
    • Option 9
    • Option 10
    • Option 11
只展开当前父级菜单

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

expand codeexpand code
      加载中
  • Navigation One
  • Navigation Two
  • Navigation Three
垂直菜单

子菜单是弹出的形式。

expand codeexpand code
      加载中


  • Navigation One
    • Item 1
      • Option 1
      • Option 2
    • Item 2
      • Option 3
      • Option 4
  • Navigation Two
    • Option 5
    • Option 6
    • Submenu
      • Option 7
      • Option 8
  • Navigation Three
    • Option 9
    • Option 10
    • Option 11
主题

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

expand codeexpand code
      加载中
Change Mode Change Theme

  • Navigation One
    • Item 1
      • Option 1
      • Option 2
    • Item 2
      • Option 3
      • Option 4
  • Navigation Two
    • Option 5
    • Option 6
    • Submenu
      • Option 7
      • Option 8
  • Navigation Three
    • Option 9
    • Option 10
    • Option 11
切换菜单类型

展示动态切换模式。

expand codeexpand code
      加载中
配合路由使用

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

expand codeexpand code
      加载中
  • Mail Group
    • Group 1
      • Option 1
      • Option 2
    • Group 2
    • Group 3
  • Team Group
    • User 1
    • User 2
递归生成菜单

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

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

expand codeexpand code
      加载中

API#

<ul nz-menu>
  <li nz-menu-item>Menu 1</li>
  <li nz-menu-item>Menu 2</li>
  <li nz-submenu nzTitle="SubMenu Title">
    <ul>
      <li nz-menu-item>SubMenu Item 1</li>
      <li nz-menu-item>SubMenu Item 2</li>
      <li nz-menu-item>SubMenu Item 3</li>
    </ul>
  </li>
</ul>

[nz-menu]#

参数说明类型默认值
[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]#

参数说明类型默认值
[nzDisabled]是否禁用booleanfalse
[nzSelected]是否被选中booleanfalse
[nzMatchRouter]是否根据 routerLink 自动设定 nzSelectedbooleanfalse
[nzMatchRouterExact]是否路由完整精确匹配, 详见 routerLinkActiveOptionsbooleanfalse
[nzDanger]展示错误状态样式booleanfalse

[nz-submenu]#

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

<li nz-submenu nzTitle="SubTitle" nzIcon="appstore"></li>

<li nz-submenu
  ><span title><span nz-icon nzType="appstore"></span><span>SubTitle</span></span></li
>

<li nz-submenu [nzTitle]="titleTpl"></li>
<ng-template #titleTpl><span nz-icon nzType="appstore"></span><span>SubTitle</span></ng-template>
参数说明类型默认值
[nzPlacement]菜单弹出位置'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight''bottomLeft'
[nzOpen]是否展开，可双向绑定booleanfalse
[nzDisabled]是否禁用booleanfalse
[nzTitle]标题内容string | TemplateRef<void>-
[nzIcon]标题中 icon 类型string-
[nzMenuClassName]自定义子菜单容器类名string-
(nzOpenChange)展开回调EventEmitter<boolean>-

[nz-menu-group]#

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

<li nz-menu-group nzTitle="SubTitle" nzIcon="appstore"></li>

<li nz-menu-group
  ><span title><span nz-icon nzType="appstore"></span><span>SubTitle</span></span></li
>

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

[nz-menu-divider]#

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