Menu 导航菜单

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

何时使用 #

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

更多布局和导航的范例可以参考:通用布局

代码演示

水平的顶部导航菜单。

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

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

子菜单是弹出的形式。

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

展示动态切换模式。

API

nz-menu

参数 说明 类型 可选值 默认值
nzTheme 主题颜色 string: light dark light
nzMode 菜单类型,现在支持垂直、水平、和内嵌模式三种 string: vertical horizontal inline vertical
nzClickActive 点击后是否选中子菜单 Boolean true

nz-menu-submenu

参数 说明 类型 可选值 默认值
nzOpen submenu是否展开,可双向绑定 Boolean false
nzOpenChange submenu展开关闭回调 Func
[title] ng-content标示,用于放置submenu title内容

nz-menu-group

参数 说明 类型 可选值 默认值
[title] ng-content标示,用于放置menu-group title内容

nz-menu-item

参数 说明 类型 可选值 默认值
nzSelected 当前菜单项是否被选中 Boolean false

nz-menu-item-divider

菜单子项目分隔线