Menu 导航菜单

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

何时使用

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

代码演示

Menu导航菜单 - 图1

顶部导航

水平的顶部导航菜单。

  1. <template>
  2. <div>
  3.   <a-menu
  4.     v-model="current"
  5.     mode="horizontal"
  6.   >
  7.     <a-menu-item key="mail">
  8.       <a-icon type="mail" />Navigation One
  9.     </a-menu-item>
  10.     <a-menu-item key="app" disabled>
  11.       <a-icon type="appstore" />Navigation Two
  12.     </a-menu-item>
  13.     <a-sub-menu>
  14.       <span slot="title" class="submenu-title-wrapper"><a-icon type="setting" />Navigation Three - Submenu</span>
  15.       <a-menu-item-group title="Item 1">
  16.         <a-menu-item key="setting:1">Option 1</a-menu-item>
  17.         <a-menu-item key="setting:2">Option 2</a-menu-item>
  18.       </a-menu-item-group>
  19.       <a-menu-item-group title="Item 2">
  20.         <a-menu-item key="setting:3">Option 3</a-menu-item>
  21.         <a-menu-item key="setting:4">Option 4</a-menu-item>
  22.       </a-menu-item-group>
  23.     </a-sub-menu>
  24.     <a-menu-item key="alipay">
  25.       <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
  26.     </a-menu-item>
  27.   </a-menu>
  28. </div>
  29. </template>
  30. <script>
  31. export default {
  32.   data () {
  33.     return {
  34.       current: ['mail'],
  35.     }
  36.   },
  37. }
  38. </script>

Menu导航菜单 - 图2

内嵌菜单

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

  1. <template>
  2. <div>
  3.   <a-menu
  4.     @click="handleClick"
  5.     style="width: 256px"
  6.     :defaultSelectedKeys="['1']"
  7.     :openKeys.sync="openKeys"
  8.     mode="inline"
  9.   >
  10.     <a-sub-menu key="sub1" @titleClick="titleClick">
  11.       <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
  12.       <a-menu-item-group key="g1">
  13.         <template slot="title"><a-icon type="qq" /><span>Item 1</span></template>
  14.         <a-menu-item key="1">Option 1</a-menu-item>
  15.         <a-menu-item key="2">Option 2</a-menu-item>
  16.       </a-menu-item-group>
  17.       <a-menu-item-group key="g2" title="Item 2">
  18.         <a-menu-item key="3">Option 3</a-menu-item>
  19.         <a-menu-item key="4">Option 4</a-menu-item>
  20.       </a-menu-item-group>
  21.     </a-sub-menu>
  22.     <a-sub-menu key="sub2" @titleClick="titleClick">
  23.       <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
  24.       <a-menu-item key="5">Option 5</a-menu-item>
  25.       <a-menu-item key="6">Option 6</a-menu-item>
  26.       <a-sub-menu key="sub3" title="Submenu">
  27.         <a-menu-item key="7">Option 7</a-menu-item>
  28.         <a-menu-item key="8">Option 8</a-menu-item>
  29.       </a-sub-menu>
  30.     </a-sub-menu>
  31.     <a-sub-menu key="sub4">
  32.       <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
  33.       <a-menu-item key="9">Option 9</a-menu-item>
  34.       <a-menu-item key="10">Option 10</a-menu-item>
  35.       <a-menu-item key="11">Option 11</a-menu-item>
  36.       <a-menu-item key="12">Option 12</a-menu-item>
  37.     </a-sub-menu>
  38.   </a-menu>
  39. </div>
  40. </template>
  41. <script>
  42. export default {
  43.   data () {
  44.     return {
  45.       current: ['mail'],
  46.       openKeys: ['sub1'],
  47.     }
  48.   },
  49.   methods: {
  50.     handleClick (e) {
  51.       console.log('click', e)
  52.     },
  53.     titleClick (e) {
  54.       console.log('titleClick', e)
  55.     },
  56.   },
  57.   watch: {
  58.     openKeys (val) {
  59.       console.log('openKeys', val)
  60.     },
  61.   },
  62. }
  64. </script>

Menu导航菜单 - 图3

缩起内嵌菜单

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

  1. <template>
  2.   <div style="width: 256px">
  3.     <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
  4.       <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
  5.     </a-button>
  6.     <a-menu
  7.       :defaultSelectedKeys="['1']"
  8.       :defaultOpenKeys="['sub1']"
  9.       mode="inline"
  10.       theme="dark"
  11.       :inlineCollapsed="collapsed"
  12.     >
  13.       <a-menu-item key="1">
  14.         <a-icon type="pie-chart" />
  15.         <span>Option 1</span>
  16.       </a-menu-item>
  17.       <a-menu-item key="2">
  18.         <a-icon type="desktop" />
  19.         <span>Option 2</span>
  20.       </a-menu-item>
  21.       <a-menu-item key="3">
  22.         <a-icon type="inbox" />
  23.         <span>Option 3</span>
  24.       </a-menu-item>
  25.       <a-sub-menu key="sub1">
  26.         <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
  27.         <a-menu-item key="5">Option 5</a-menu-item>
  28.         <a-menu-item key="6">Option 6</a-menu-item>
  29.         <a-menu-item key="7">Option 7</a-menu-item>
  30.         <a-menu-item key="8">Option 8</a-menu-item>
  31.       </a-sub-menu>
  32.       <a-sub-menu key="sub2">
  33.         <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
  34.         <a-menu-item key="9">Option 9</a-menu-item>
  35.         <a-menu-item key="10">Option 10</a-menu-item>
  36.         <a-sub-menu key="sub3" title="Submenu">
  37.           <a-menu-item key="11">Option 11</a-menu-item>
  38.           <a-menu-item key="12">Option 12</a-menu-item>
  39.         </a-sub-menu>
  40.       </a-sub-menu>
  41.     </a-menu>
  42.   </div>
  43. </template>
  45. <script>
  46. export default {
  47.   data () {
  48.     return {
  49.       collapsed: false,
  50.     }
  51.   },
  52.   methods: {
  53.     toggleCollapsed () {
  54.       this.collapsed = !this.collapsed
  55.     },
  56.   },
  57. }
  58. </script>

Menu导航菜单 - 图4

只展开当前父级菜单

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

  1. <template>
  2. <div>
  3.   <a-menu
  4.     mode="inline"
  5.     :openKeys="openKeys"
  6.     @openChange="onOpenChange"
  7.     style="width: 256px"
  8.   >
  9.     <a-sub-menu key="sub1">
  10.       <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
  11.       <a-menu-item key="1">Option 1</a-menu-item>
  12.       <a-menu-item key="2">Option 2</a-menu-item>
  13.       <a-menu-item key="3">Option 3</a-menu-item>
  14.       <a-menu-item key="4">Option 4</a-menu-item>
  15.     </a-sub-menu>
  16.     <a-sub-menu key="sub2">
  17.       <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
  18.       <a-menu-item key="5">Option 5</a-menu-item>
  19.       <a-menu-item key="6">Option 6</a-menu-item>
  20.       <a-sub-menu key="sub3" title="Submenu">
  21.         <a-menu-item key="7">Option 7</a-menu-item>
  22.         <a-menu-item key="8">Option 8</a-menu-item>
  23.       </a-sub-menu>
  24.     </a-sub-menu>
  25.     <a-sub-menu key="sub4">
  26.       <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
  27.       <a-menu-item key="9">Option 9</a-menu-item>
  28.       <a-menu-item key="10">Option 10</a-menu-item>
  29.       <a-menu-item key="11">Option 11</a-menu-item>
  30.       <a-menu-item key="12">Option 12</a-menu-item>
  31.     </a-sub-menu>
  32.   </a-menu>
  33. </div>
  34. </template>
  35. <script>
  36. export default {
  37.   data () {
  38.     return {
  39.       rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
  40.       openKeys: ['sub1'],
  41.     }
  42.   },
  43.   methods: {
  44.     onOpenChange (openKeys) {
  45.       const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
  46.       if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
  47.         this.openKeys = openKeys
  48.       } else {
  49.         this.openKeys = latestOpenKey ? [latestOpenKey] : []
  50.       }
  51.     },
  52.   },
  53. }
  55. </script>

Menu导航菜单 - 图5

垂直菜单

子菜单是弹出的形式。

  1. <template>
  2. <div>
  3.   <a-menu
  4.     style="width: 256px"
  5.     mode="vertical"
  6.     @click="handleClick"
  7.   >
  8.     <a-menu-item key="1">
  9.       <a-icon type="mail" />
  10.       Navigation One
  11.     </a-menu-item>
  12.     <a-menu-item key="2">
  13.       <a-icon type="calendar" />
  14.       Navigation Two
  15.     </a-menu-item>
  16.     <a-sub-menu key="sub1">
  17.       <span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>
  18.       <a-menu-item key="3">Option 3</a-menu-item>
  19.       <a-menu-item key="4">Option 4</a-menu-item>
  20.       <a-sub-menu key="sub1-2" title="Submenu">
  21.         <a-menu-item key="5">Option 5</a-menu-item>
  22.         <a-menu-item key="6">Option 6</a-menu-item>
  23.       </a-sub-menu>
  24.     </a-sub-menu>
  25.     <a-sub-menu key="sub2">
  26.       <span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>
  27.       <a-menu-item key="7">Option 7</a-menu-item>
  28.       <a-menu-item key="8">Option 8</a-menu-item>
  29.       <a-menu-item key="9">Option 9</a-menu-item>
  30.       <a-menu-item key="10">Option 10</a-menu-item>
  31.     </a-sub-menu>
  32.   </a-menu>
  33. </div>
  34. </template>
  35. <script>
  36. export default {
  37.   methods: {
  38.     handleClick (e) {
  39.       console.log('click ', e)
  40.     },
  41.   },
  42. }
  44. </script>

Menu导航菜单 - 图6

主题

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

  1. <template>
  2. <div>
  3.   <a-switch
  4.     defaultChecked
  5.     @change="changeTheme"
  6.     checkedChildren="dark"
  7.     unCheckedChildren="light"
  8.   />
  9.   <br />
  10.   <br />
  11.   <a-menu
  12.     style="width: 256px"
  13.     :defaultSelectedKeys="['1']"
  14.     :defaultOpenKeys="['sub1']"
  15.     mode="inline"
  16.     :theme="theme"
  17.     :selectedKeys="[current]"
  18.     @click="handleClick"
  19.   >
  20.     <a-menu-item key="1">
  21.       <a-icon type="mail" />
  22.       Navigation One
  23.     </a-menu-item>
  24.     <a-menu-item key="2">
  25.       <a-icon type="calendar" />
  26.       Navigation Two
  27.     </a-menu-item>
  28.     <a-sub-menu key="sub1">
  29.       <span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>
  30.       <a-menu-item key="3">Option 3</a-menu-item>
  31.       <a-menu-item key="4">Option 4</a-menu-item>
  32.       <a-sub-menu key="sub1-2" title="Submenu">
  33.         <a-menu-item key="5">Option 5</a-menu-item>
  34.         <a-menu-item key="6">Option 6</a-menu-item>
  35.       </a-sub-menu>
  36.     </a-sub-menu>
  37.     <a-sub-menu key="sub2">
  38.       <span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>
  39.       <a-menu-item key="7">Option 7</a-menu-item>
  40.       <a-menu-item key="8">Option 8</a-menu-item>
  41.       <a-menu-item key="9">Option 9</a-menu-item>
  42.       <a-menu-item key="10">Option 10</a-menu-item>
  43.     </a-sub-menu>
  44.   </a-menu>
  45. </div>
  46. </template>
  47. <script>
  48. export default {
  49.   data () {
  50.     return {
  51.       current: '1',
  52.       theme: 'dark',
  53.     }
  54.   },
  55.   methods: {
  56.     handleClick (e) {
  57.       console.log('click ', e)
  58.       this.current = e.key
  59.     },
  60.     changeTheme (checked) {
  61.       this.theme = checked ? 'dark' : 'light'
  62.     },
  63.   },
  64. }
  66. </script>

Menu导航菜单 - 图7

切换菜单类型

展示动态切换模式。

  1. <template>
  2. <div>
  3.   <a-switch
  4.     :defaultChecked="false"
  5.     @change="changeMode"
  6.   /> Change Mode
  7.   <span className="ant-divider" style="margin: 0 1em"/>
  8.   <a-switch
  9.     :defaultChecked="false"
  10.     @change="changeTheme"
  11.   /> Change Theme
  12.   <br />
  13.   <br />
  14.   <a-menu
  15.     style="width: 256px"
  16.     :defaultSelectedKeys="['1']"
  17.     :defaultOpenKeys="['sub1']"
  18.     :mode="mode"
  19.     :theme="theme"
  20.   >
  21.     <a-menu-item key="1">
  22.       <a-icon type="mail" />
  23.       Navigation One
  24.     </a-menu-item>
  25.     <a-menu-item key="2">
  26.       <a-icon type="calendar" />
  27.       Navigation Two
  28.     </a-menu-item>
  29.     <a-sub-menu key="sub1">
  30.       <span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>
  31.       <a-menu-item key="3">Option 3</a-menu-item>
  32.       <a-menu-item key="4">Option 4</a-menu-item>
  33.       <a-sub-menu key="sub1-2" title="Submenu">
  34.         <a-menu-item key="5">Option 5</a-menu-item>
  35.         <a-menu-item key="6">Option 6</a-menu-item>
  36.       </a-sub-menu>
  37.     </a-sub-menu>
  38.     <a-sub-menu key="sub2">
  39.       <span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>
  40.       <a-menu-item key="7">Option 7</a-menu-item>
  41.       <a-menu-item key="8">Option 8</a-menu-item>
  42.       <a-menu-item key="9">Option 9</a-menu-item>
  43.       <a-menu-item key="10">Option 10</a-menu-item>
  44.     </a-sub-menu>
  45.   </a-menu>
  46. </div>
  47. </template>
  48. <script>
  49. export default {
  50.   data () {
  51.     return {
  52.       mode: 'inline',
  53.       theme: 'light',
  54.     }
  55.   },
  56.   methods: {
  57.     changeMode (checked) {
  58.       this.mode = checked ? 'vertical' : 'inline'
  59.     },
  60.     changeTheme (checked) {
  61.       this.theme = checked ? 'dark' : 'light'
  62.     },
  63.   },
  64. }
  66. </script>

Menu导航菜单 - 图8

单文件递归菜单

使用单文件方式递归生成菜单。因组件内部会动态更改a-sub-menu的属性，如果拆分成单文件，无法将属性挂载到a-sub-menu上，你需要自行声明属性并挂载。为了方便，避免属性的声明，我们推荐使用函数式组件。

  1. <template>
  2.   <div style="width: 256px">
  3.     <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
  4.       <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
  5.     </a-button>
  6.     <a-menu
  7.       :defaultSelectedKeys="['1']"
  8.       :defaultOpenKeys="['2']"
  9.       mode="inline"
  10.       theme="dark"
  11.       :inlineCollapsed="collapsed"
  12.     >
  13.       <template v-for="item in list">
  14.         <a-menu-item v-if="!item.children" :key="item.key">
  15.           <a-icon type="pie-chart" />
  16.           <span>{{item.title}}</span>
  17.         </a-menu-item>
  18.         <sub-menu v-else :menu-info="item" :key="item.key"/>
  19.       </template>
  20.     </a-menu>
  21.   </div>
  22. </template>
  24. <script>
  25. /* 
  26.  * recommend SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue
  27.  * SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue
  28.  * */
  29. import SubMenu from './SubMenu'
  30. export default {
  31.   components: {
  32.     'sub-menu': SubMenu,
  33.   },
  34.   data () {
  35.     return {
  36.       collapsed: false,
  37.       list: [
  38.         {
  39.           key: '1',
  40.           title: 'Option 1',
  41.         }, {
  42.           key: '2',
  43.           title: 'Navigation 2',
  44.           children: [
  45.             {
  46.               key: '2.1',
  47.               title: 'Navigation 3',
  48.               children: [
  49.                 { key: '2.1.1',
  50.                   title: 'Option 2.1.1',
  51.                 },
  52.               ],
  53.             },
  54.           ],
  55.         }],
  56.     }
  57.   },
  58.   methods: {
  59.     toggleCollapsed () {
  60.       this.collapsed = !this.collapsed
  61.     },
  62.   },
  63. }
  64. </script>

API

  1. <template>
  2.   <a-menu>
  3.     <a-menu-item>菜单项</a-menu-item>
  4.     <a-sub-menu title="子菜单">
  5.       <a-menu-item>子菜单项</a-menu-item>
  6.     </a-sub-menu>
  7.   </a-menu>
  8. </template>

Menu

参数说明类型默认值
defaultOpenKeys初始展开的 SubMenu 菜单项 key 数组
defaultSelectedKeys初始选中的菜单项 key 数组string[]
forceSubMenuRender在子菜单展示之前就渲染进 DOMbooleanfalse
inlineCollapsedinline 时菜单是否收起状态boolean-
inlineIndentinline 模式的菜单缩进宽度number24
mode菜单类型，现在支持垂直、水平、和内嵌模式三种string: vertical vertical-right horizontal inlinevertical
multiple是否允许多选booleanfalse
openKeys(.sync)当前展开的 SubMenu 菜单项 key 数组string[]
selectable是否允许选中booleantrue
selectedKeys(v-model)当前选中的菜单项 key 数组string[]
subMenuCloseDelay用户鼠标离开子菜单后关闭延时，单位：秒number0.1
subMenuOpenDelay用户鼠标进入子菜单后开启延时，单位：秒number0
theme主题颜色string: light darklight

Menu事件

事件名称说明回调参数
click点击 MenuItem 调用此函数function({ item, key, keyPath })
deselect取消选中时调用，仅在 multiple 生效function({ item, key, selectedKeys })
openChangeSubMenu 展开/关闭的回调function(openKeys: string[])
select被选中时调用function({ item, key, selectedKeys })

Menu.Item

参数说明类型默认值
disabled是否禁用booleanfalse
keyitem 的唯一标志string
title设置收缩时展示的悬浮标题string

Menu.SubMenu

参数说明类型默认值
disabled是否禁用booleanfalse
key唯一标志string
title子菜单项值string|slot

Menu.SubMenu 的子元素必须是 MenuItem 或者 SubMenu.

SubMenu事件

事件名称说明回调参数
titleClick点击子菜单标题({ key, domEvent })

Menu.ItemGroup

参数说明类型默认值
title分组标题string||function|slot

Menu.ItemGroup 的子元素必须是 MenuItem.

Menu.Divider

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