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

    Menu 导航菜单

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

    何时使用

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

    代码演示

    Menu 导航菜单 - 图1

    顶部导航

    水平的顶部导航菜单。

    1. <template>
    2.   <div>
    3.     <a-menu v-model="current" mode="horizontal">
    4.       <a-menu-item key="mail"> <a-icon type="mail" />Navigation One </a-menu-item>
    5.       <a-menu-item key="app" disabled> <a-icon type="appstore" />Navigation Two </a-menu-item>
    6.       <a-sub-menu>
    7.         <span slot="title" class="submenu-title-wrapper"
    8.           ><a-icon type="setting" />Navigation Three - Submenu</span
    9.         >
    10.         <a-menu-item-group title="Item 1">
    11.           <a-menu-item key="setting:1">Option 1</a-menu-item>
    12.           <a-menu-item key="setting:2">Option 2</a-menu-item>
    13.         </a-menu-item-group>
    14.         <a-menu-item-group title="Item 2">
    15.           <a-menu-item key="setting:3">Option 3</a-menu-item>
    16.           <a-menu-item key="setting:4">Option 4</a-menu-item>
    17.         </a-menu-item-group>
    18.       </a-sub-menu>
    19.       <a-menu-item key="alipay">
    20.         <a href="https://antdv.com" target="_blank" rel="noopener noreferrer"
    21.           >Navigation Four - Link</a
    22.         >
    23.       </a-menu-item>
    24.     </a-menu>
    25.   </div>
    26. </template>
    27. <script>
    28.   export default {
    29.     data() {
    30.       return {
    31.         current: ['mail'],
    32.       };
    33.     },
    34.   };
    35. </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"
    14.             ><a-icon type="qq" /><span>Item 1</span></template
    15.           >
    16.           <a-menu-item key="1">Option 1</a-menu-item>
    17.           <a-menu-item key="2">Option 2</a-menu-item>
    18.         </a-menu-item-group>
    19.         <a-menu-item-group key="g2" title="Item 2">
    20.           <a-menu-item key="3">Option 3</a-menu-item>
    21.           <a-menu-item key="4">Option 4</a-menu-item>
    22.         </a-menu-item-group>
    23.       </a-sub-menu>
    24.       <a-sub-menu key="sub2" @titleClick="titleClick">
    25.         <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
    26.         <a-menu-item key="5">Option 5</a-menu-item>
    27.         <a-menu-item key="6">Option 6</a-menu-item>
    28.         <a-sub-menu key="sub3" title="Submenu">
    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>
    33.       <a-sub-menu key="sub4">
    34.         <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
    35.         <a-menu-item key="9">Option 9</a-menu-item>
    36.         <a-menu-item key="10">Option 10</a-menu-item>
    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-menu>
    41.   </div>
    42. </template>
    43. <script>
    44.   export default {
    45.     data() {
    46.       return {
    47.         current: ['mail'],
    48.         openKeys: ['sub1'],
    49.       };
    50.     },
    51.     methods: {
    52.       handleClick(e) {
    53.         console.log('click', e);
    54.       },
    55.       titleClick(e) {
    56.         console.log('titleClick', e);
    57.       },
    58.     },
    59.     watch: {
    60.       openKeys(val) {
    61.         console.log('openKeys', val);
    62.       },
    63.     },
    64.   };
    65. </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 mode="inline" :openKeys="openKeys" @openChange="onOpenChange" style="width: 256px">
    4.       <a-sub-menu key="sub1">
    5.         <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
    6.         <a-menu-item key="1">Option 1</a-menu-item>
    7.         <a-menu-item key="2">Option 2</a-menu-item>
    8.         <a-menu-item key="3">Option 3</a-menu-item>
    9.         <a-menu-item key="4">Option 4</a-menu-item>
    10.       </a-sub-menu>
    11.       <a-sub-menu key="sub2">
    12.         <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
    13.         <a-menu-item key="5">Option 5</a-menu-item>
    14.         <a-menu-item key="6">Option 6</a-menu-item>
    15.         <a-sub-menu key="sub3" title="Submenu">
    16.           <a-menu-item key="7">Option 7</a-menu-item>
    17.           <a-menu-item key="8">Option 8</a-menu-item>
    18.         </a-sub-menu>
    19.       </a-sub-menu>
    20.       <a-sub-menu key="sub4">
    21.         <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
    22.         <a-menu-item key="9">Option 9</a-menu-item>
    23.         <a-menu-item key="10">Option 10</a-menu-item>
    24.         <a-menu-item key="11">Option 11</a-menu-item>
    25.         <a-menu-item key="12">Option 12</a-menu-item>
    26.       </a-sub-menu>
    27.     </a-menu>
    28.   </div>
    29. </template>
    30. <script>
    31.   export default {
    32.     data() {
    33.       return {
    34.         rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
    35.         openKeys: ['sub1'],
    36.       };
    37.     },
    38.     methods: {
    39.       onOpenChange(openKeys) {
    40.         const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
    41.         if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
    42.           this.openKeys = openKeys;
    43.         } else {
    44.           this.openKeys = latestOpenKey ? [latestOpenKey] : [];
    45.         }
    46.       },
    47.     },
    48.   };
    49. </script>

    Menu 导航菜单 - 图5

    垂直菜单

    子菜单是弹出的形式。

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

    Menu 导航菜单 - 图7

    切换菜单类型

    展示动态切换模式。

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

    API

    <template>
  <a-menu>
    <a-menu-item>菜单项</a-menu-item>
    <a-sub-menu title="子菜单">
      <a-menu-item>子菜单项</a-menu-item>
    </a-sub-menu>
  </a-menu>
</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
    overflowedIndicator自定义 Menu 折叠时的图标DOM<span>···</span>

    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

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