NG-ZORROMenu
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
Horizontal top navigation menu.
Loading...
Support 6 placements.
Loading...
Vertical menu with inline submenus.
Loading...
Inline menu could be collapsed.
Here is a complete demo with sider layout.
Loading...
Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.
Loading...
Submenus open as pop-ups.
Loading...
There are two built-in themes: 'light' and 'dark'. The default value is 'light'.
Loading...
Show the dynamic switching mode (between 'inline' and 'vertical').
Loading...
Automatically activate menu items based on routing, should work with RouterLink.
Loading...
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
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]#
| Param | Description | Type | Default value |
|---|---|---|---|
[nzInlineCollapsed] | specifies the collapsed status when menu is inline mode | boolean | - |
[nzInlineIndent] | indent px of inline menu item on each level | number | 24 |
[nzMode] | type of the menu; vertical、 horizontal, and inline modes are supported | 'vertical' | 'horizontal' | 'inline' | 'vertical' |
[nzSelectable] | allow selecting menu items | boolean | true |
[nzTheme] | color theme of the menu | 'light' | 'dark' | 'light' |
(nzClick) | the Output when click nz-menu-item inside nz-menu | EventEmitter<NzMenuItemDirective> |
[nz-menu-item]#
| Param | Description | Type | Default value |
|---|---|---|---|
[nzDisabled] | whether menu item is disabled or not | boolean | false |
[nzSelected] | whether menu item is selected or not | boolean | false |
[nzMatchRouter] | whether auto set nzSelected according to routerLink | boolean | false |
[nzMatchRouterExact] | only match when the url matches the link exactly, same as routerLinkActiveOptions | boolean | false |
[nzDanger] | display the danger style | boolean | false |
[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>| Param | Description | Type | Default value |
|---|---|---|---|
[nzPlacement] | placement of pop menu | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' |
[nzOpen] | whether sub menu is open or not, double binding | boolean | false |
[nzDisabled] | whether sub menu is disabled or not | boolean | false |
[nzTitle] | set submenu title | string | TemplateRef<void> | - |
[nzIcon] | icon type in title | string | - |
[nzMenuClassName] | Custom the submenu container's class name | string | - |
[nzTriggerSubMenuAction] | Which action can trigger submenu open/close | 'hover' | 'click' | 'hover' |
(nzOpenChange) | nzOpen callback | EventEmitter<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>| Param | Description | Type | Default value |
|---|---|---|---|
[nzTitle] | set menu group title | string | TemplateRef<void> | - |
[nz-menu-divider]#
Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.