顶部导航

弹出位置

内嵌菜单

缩起内嵌菜单

只展开当前父级菜单

Menu导航菜单

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

何时使用#

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

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

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

代码演示

内嵌菜单

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

      加载中

缩起内嵌菜单

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

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

      加载中

只展开当前父级菜单

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

      加载中

主题

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

      加载中

Change Mode Change Theme

切换菜单类型

展示动态切换模式。

      加载中

递归生成菜单

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

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

      加载中

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>

参数	说明	类型	默认值
`[nzInlineCollapsed]`	`inline` 时菜单是否收起状态	`boolean`	-
`[nzInlineIndent]`	`inline` 模式的菜单缩进宽度	`number`	`24`
`[nzMode]`	菜单类型，现在支持垂直、水平、和内嵌模式三种	`'vertical' \| 'horizontal' \| 'inline'`	`'vertical'`
`[nzSelectable]`	是否允许选中	`boolean`	`true`
`[nzTheme]`	主题颜色	`'light' \| 'dark'`	`'light'`
`(nzClick)`	点击 `nz-menu-item` 输出属性	`EventEmitter<NzMenuItemDirective>`

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

[nz-submenu]directive#

你可以使用以下三种方式来定义 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]`	是否展开，可双向绑定	`boolean`	`false`
`[nzDisabled]`	是否禁用	`boolean`	`false`
`[nzTitle]`	标题内容	`string \| TemplateRef<void>`	-
`[nzIcon]`	标题中 `icon` 类型	`string`	-
`[nzMenuClassName]`	自定义子菜单容器类名	`string`	-
`[nzTriggerSubMenuAction]`	SubMenu 展开/关闭的触发行为	`'hover' \| 'click'`	`'hover'`
`(nzOpenChange)`	展开回调	`EventEmitter<boolean>`	-

你可以使用以下三种方式来定义 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>`	-

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

Menu导航菜单

何时使用#

代码演示

API#

[nz-menu]directive#

[nz-menu-item]directive#

[nz-submenu]directive#

[nz-menu-group]directive#

[nz-menu-divider]directive#