Menu 菜单

用于侧边栏、顶部导航和多级菜单结构。

何时使用

需要在页面中组织一组导航入口。
需要展示多级导航、分组导航或顶部横向导航。
需要和 Layout Sidebar 组合，跟随侧边栏折叠和主题变化。

基础用法

vue

<template>
  <x-menu v-model:selected-keys="selectedKeys" v-model:open-keys="openKeys">
    <x-menu-item key="0_0">Menu 1</x-menu-item>
    <x-menu-sub-menu key="0">
      <template #title>Navigation 1</template>
      <x-menu-item key="0_1">Menu 2</x-menu-item>
      <x-menu-item key="0_2">Menu 3</x-menu-item>
    </x-menu-sub-menu>
  </x-menu>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const selectedKeys = ref(['0_1']);
const openKeys = ref(['0']);
</script>

水平菜单

vue

<template>
  <x-menu v-model:selected-keys="selectedKeys" mode="horizontal">
    <x-menu-item key="1">Home</x-menu-item>
    <x-menu-item key="2">Solution</x-menu-item>
    <x-menu-sub-menu key="3" title="Cloud Service">
      <x-menu-item key="3_0">Compute</x-menu-item>
      <x-menu-item key="3_1">Storage</x-menu-item>
    </x-menu-sub-menu>
    <x-menu-item key="4">Cooperation</x-menu-item>
  </x-menu>
</template>

深色主题

vue

<template>
  <x-menu v-model:selected-keys="selectedKeys" theme="dark" mode="horizontal">
    <x-menu-item key="1">Home</x-menu-item>
    <x-menu-item key="2">Solution</x-menu-item>
    <x-menu-item key="3">Cloud Service</x-menu-item>
    <x-menu-item key="4">Cooperation</x-menu-item>
  </x-menu>
</template>

折叠菜单

vue

<template>
  <x-menu
    v-model:collapsed="collapsed"
    v-model:selected-keys="selectedKeys"
    show-collapse-button
    :collapsed-width="56"
  >
    <x-menu-item key="overview">
      <template #icon><span style="display:inline-block;width:14px;height:14px;border-radius:4px;background:currentColor;" /></template>
      概览
    </x-menu-item>
    <x-menu-sub-menu key="workspace" title="工作台">
      <template #icon><span style="display:inline-block;width:14px;height:14px;border-radius:4px;background:currentColor;" /></template>
      <x-menu-item key="components">组件</x-menu-item>
      <x-menu-item key="docs">文档</x-menu-item>
    </x-menu-sub-menu>
  </x-menu>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const collapsed = ref(false);
const selectedKeys = ref(['overview']);
</script>

弹出菜单

vue

<template>
  <x-menu v-model:selected-keys="selectedKeys" mode="pop" show-collapse-button>
    <x-menu-item key="1">Navigation 1</x-menu-item>
    <x-menu-sub-menu key="2" title="Navigation 2">
      <x-menu-item key="2_0">Beijing</x-menu-item>
      <x-menu-item key="2_1">Shanghai</x-menu-item>
    </x-menu-sub-menu>
  </x-menu>

  <x-menu mode="popButton" show-collapse-button>
    <x-menu-item key="1">Bugs</x-menu-item>
    <x-menu-item key="2">Ideas</x-menu-item>
  </x-menu>
</template>

手风琴和自动展开

vue

<template>
  <x-menu
    v-model:selected-keys="selectedKeys"
    v-model:open-keys="openKeys"
    accordion
    auto-open-selected
  >
    <x-menu-sub-menu key="workspace" title="工作台">
      <x-menu-item key="components">组件</x-menu-item>
      <x-menu-item key="docs">文档</x-menu-item>
    </x-menu-sub-menu>
    <x-menu-sub-menu key="system" title="系统">
      <x-menu-item key="users">用户</x-menu-item>
      <x-menu-item key="roles">角色</x-menu-item>
    </x-menu-sub-menu>
  </x-menu>
</template>

分组、禁用与插槽

vue

<template>
  <x-menu v-model:selected-keys="selectedKeys" v-model:open-keys="openKeys">
    <x-menu-item-group title="常用">
      <x-menu-item key="design">
        <template #icon><span style="display:inline-block;width:14px;height:14px;border-radius:4px;background:currentColor;" /></template>
        设计
      </x-menu-item>
      <x-menu-item key="release" disabled>发布冻结</x-menu-item>
    </x-menu-item-group>
    <x-menu-sub-menu key="product" disabled>
      <template #title>产品配置</template>
      <template #icon><span style="display:inline-block;width:14px;height:14px;border-radius:4px;background:currentColor;" /></template>
      <x-menu-item key="plan">计划</x-menu-item>
    </x-menu-sub-menu>
  </x-menu>
</template>

事件回调

vue

<template>
  <x-menu
    v-model:selected-keys="selectedKeys"
    v-model:open-keys="openKeys"
    show-collapse-button
    @menu-item-click="handleItemClick"
    @sub-menu-click="handleSubMenuClick"
    @collapse="handleCollapse"
  >
    <x-menu-item key="overview">概览</x-menu-item>
    <x-menu-sub-menu key="workspace" title="工作台">
      <x-menu-item key="components">组件</x-menu-item>
    </x-menu-sub-menu>
  </x-menu>
</template>

与 Layout 组合

vue

<template>
  <x-layout has-sidebar>
    <x-layout-sidebar collapsible theme="dark" :width="220" :collapsed-width="64">
      <x-menu v-model:selected-keys="selectedKeys" theme="dark">
        <x-menu-item key="overview">概览</x-menu-item>
        <x-menu-sub-menu key="workspace" title="工作台">
          <x-menu-item key="components">组件</x-menu-item>
        </x-menu-sub-menu>
      </x-menu>
    </x-layout-sidebar>
    <x-layout-content>Content</x-layout-content>
  </x-layout>
</template>

使用说明

MenuItem 和 MenuSubMenu 应设置唯一稳定的 key，选中、展开、自动滚动和父级选中态都依赖该值。
autoOpenSelected 用于初始化时展开当前选中项所在路径；动态路由切换时建议受控维护 openKeys。
弹出模式的浮层显示由 Trigger 交互控制，openKeys 主要用于子菜单点击状态和 inline 展开状态。

按需导入

import { Menu, MenuItem, MenuItemGroup, MenuSubMenu } from 'x-next';

参数	说明	类型	默认值
`theme`	菜单主题	`'light' \| 'dark'`	`'light'`
`mode`	菜单模式	`'vertical' \| 'horizontal' \| 'pop' \| 'popButton'`	`'vertical'`
`levelIndent`	层级缩进	`number`	`-`
`autoOpen`	是否默认展开所有多级菜单	`boolean`	`false`
`collapsed`	是否折叠，可配合 `v-model:collapsed` 使用	`boolean`	`undefined`
`defaultCollapsed`	默认是否折叠	`boolean`	`false`
`collapsedWidth`	折叠菜单宽度	`number`	`-`
`accordion`	是否开启手风琴效果	`boolean`	`false`
`autoScrollIntoView`	是否自动滚动选中项到可见区域	`boolean`	`false`
`showCollapseButton`	是否显示内置折叠按钮	`boolean`	`false`
`selectedKeys`	选中的菜单项 key	`string[]`	`undefined`
`defaultSelectedKeys`	默认选中的菜单项 key	`string[]`	`[]`
`openKeys`	展开的子菜单 key	`string[]`	`undefined`
`defaultOpenKeys`	默认展开的子菜单 key	`string[]`	`[]`
`scrollConfig`	滚动到可见区域配置	`object`	`-`
`triggerProps`	弹出模式下传给 Trigger 的配置	`TriggerProps`	`-`
`tooltipProps`	折叠 Tooltip 配置	`object`	`-`
`autoOpenSelected`	初始化时展开选中项所在子菜单	`boolean`	`false`
`breakpoint`	响应式折叠断点	`'xxl' \| 'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'`	`-`
`popupMaxHeight`	弹出框最大高度	`boolean \| number`	`true`

事件名	说明	回调参数
`update:collapsed`	折叠状态变化时触发	`collapsed: boolean`
`update:selectedKeys`	选中项变化时触发	`keys: string[]`
`update:openKeys`	展开项变化时触发	`keys: string[]`
`collapse`	折叠状态变化时触发	`collapsed, type`
`menu-item-click`	点击菜单项时触发	`key`
`sub-menu-click`	点击子菜单时触发	`key, openKeys`

MenuItem Props

参数	说明	类型	默认值
`disabled`	是否禁用	`boolean`	`false`

MenuSubMenu Props

参数	说明	类型	默认值
`title`	子菜单标题	`string`	`-`
`selectable`	弹出模式下标题是否可选中	`boolean`	`false`
`disabled`	是否禁用	`boolean`	`false`
`popup`	是否强制使用弹出模式	`boolean \| (level: number) => boolean`	`false`
`popupMaxHeight`	弹出框最大高度	`boolean \| number`	`-`

MenuItemGroup Props

参数	说明	类型	默认值
`title`	分组标题	`string`	`-`

Slots

组件	插槽名	说明
`Menu`	`default`	菜单内容
`Menu`	`collapse-icon`	折叠图标
`Menu`	`expand-icon-down`	向下展开图标
`Menu`	`expand-icon-right`	向右展开图标
`MenuItem`	`default`	菜单项内容
`MenuItem`	`icon`	菜单项图标
`MenuSubMenu`	`default`	子菜单内容
`MenuSubMenu`	`title`	自定义标题
`MenuSubMenu`	`icon`	子菜单图标
`MenuItemGroup`	`title`	自定义分组标题

Menu 菜单 ​

何时使用 ​

基础用法 ​

水平菜单 ​

深色主题 ​

折叠菜单 ​

弹出菜单 ​

手风琴和自动展开 ​

分组、禁用与插槽 ​

事件回调 ​

与 Layout 组合 ​

使用说明 ​

按需导入 ​

Menu Props ​

Menu Events ​

MenuItem Props ​

MenuSubMenu Props ​

MenuItemGroup Props ​

Slots ​

何时使用

基础用法

水平菜单

深色主题

折叠菜单

弹出菜单

手风琴和自动展开

分组、禁用与插槽

事件回调

与 Layout 组合

使用说明

按需导入

Menu Props

Menu Events

MenuItem Props

MenuSubMenu Props

MenuItemGroup Props

Slots