Menu

Menu list of Navigation.

When To Use#

Navigation menu is important for a website, it helps users jump from one site section to another quickly. Mostly, it includes top navigation and side navigation. Top navigation provides all the category and functions of the website. Side navigation provides the Multi-level structure of the website.

More layouts with navigation: layout.

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

Examples

Top Navigation

Horizontal top navigation menu.

expand codeexpand code
      Loading...
  • bottomLeft
  • bottomCenter
  • bottomRight
  • topLeft
  • topCenter
  • topRight
Placement

Support 6 placements.

expand codeexpand code
      Loading...
  • 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
Inline menu

Vertical menu with inline submenus.

expand codeexpand code
      Loading...
  • Navigation One
  • Navigation Two
    • Option 5
    • Option 6
    • Submenu
      • Option 7
      • Option 8
  • Navigation Three
    • Option 9
    • Option 10
    • Option 11
Collapsed inline menu

Inline menu could be collapsed.

Here is a complete demo with sider layout.

expand codeexpand code
      Loading...
  • 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
Open current submenu only

Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.

expand codeexpand code
      Loading...
  • Navigation One
  • Navigation Two
  • Navigation Three
Vertical menu

Submenus open as pop-ups.

expand codeexpand code
      Loading...


  • 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
Menu Themes

There are two built-in themes: 'light' and 'dark'. The default value is 'light'.

expand codeexpand code
      Loading...
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
Switch the menu type

Show the dynamic switching mode (between 'inline' and 'vertical').

expand codeexpand code
      Loading...
Router

Automatically activate menu items based on routing, should work with RouterLink.

expand codeexpand code
      Loading...
  • Mail Group
    • Group 1
      • Option 1
      • Option 2
    • Group 2
    • Group 3
  • Team Group
    • User 1
    • User 2
Recursive

Recursive generation menu, you need to set nzPaddingLeftmanually, only works when nzMode is inline mode and nzInlineCollapsed is false;

Track Issue：https://github.com/angular/angular/issues/14842

expand codeexpand code
      Loading...

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]#

ParamDescriptionTypeDefault value
[nzInlineCollapsed]specifies the collapsed status when menu is inline modeboolean-
[nzInlineIndent]indent px of inline menu item on each levelnumber24
[nzMode]type of the menu; vertical、 horizontal, and inline modes are supported'vertical' | 'horizontal' | 'inline''vertical'
[nzSelectable]allow selecting menu itemsbooleantrue
[nzTheme]color theme of the menu'light' | 'dark''light'
(nzClick)the Output when click nz-menu-item inside nz-menuEventEmitter<NzMenuItemDirective>

[nz-menu-item]#

ParamDescriptionTypeDefault value
[nzDisabled]whether menu item is disabled or notbooleanfalse
[nzSelected]whether menu item is selected or notbooleanfalse
[nzMatchRouter]whether auto set nzSelected according to routerLinkbooleanfalse
[nzMatchRouterExact]only match when the url matches the link exactly, same as routerLinkActiveOptionsbooleanfalse
[nzDanger]display the danger stylebooleanfalse

[nz-submenu]#

You can set the title of [nz-submenu] in the following ways.

<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>
ParamDescriptionTypeDefault value
[nzPlacement]placement of pop menu'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight''bottomLeft'
[nzOpen]whether sub menu is open or not, double bindingbooleanfalse
[nzDisabled]whether sub menu is disabled or notbooleanfalse
[nzTitle]set submenu titlestring | TemplateRef<void>-
[nzIcon]icon type in titlestring-
[nzMenuClassName]Custom the submenu container's class namestring-
(nzOpenChange)nzOpen callbackEventEmitter<boolean>-

[nz-menu-group]#

You can set the title of [nz-menu-group] in the following ways.

<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>
ParamDescriptionTypeDefault value
[nzTitle]set menu group titlestring | TemplateRef<void>-

[nz-menu-divider]#

Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.