• Menu 导航菜单
    • 何时使用
    • 代码演示
      • 顶部导航
      • 内嵌菜单
      • 缩起内嵌菜单
      • 只展开当前父级菜单
      • 垂直菜单
      • 主题
      • 切换菜单类型
      • 单文件递归菜单
  • API
    • Menu
    • Menu事件
    • Menu.Item
    • Menu.SubMenu
    • SubMenu事件
    • Menu.ItemGroup
    • Menu.Divider

    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

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